Having trouble with displaying an image

2022-05-04 10:58 Hirbod imported from Stackoverflow

The goal is to display an authenticated user's avatar pic.
back-end and front-end have separate servers and are using restful api and i'm using vanilla js to send a GET request to get the avatar and show it.
this is what i return in laravel controller:

    return response()->file(base_path() . '/storage/app/images/avatars/1.jpeg', ['Content-Type' => 'Image/jpeg']);

    // also tryed these but no luck
    // return response()->download(Storage::disk('local')->get('images/avatars/1.jpeg'), 'name', ['Content-Type' => 'Image/jpeg']);

    // return Storage::disk('local')->get('images/avatars/1.jpeg');

    // return response()->file(Storage::disk('local')->get('images/avatars/1.jpeg'));

and this is how i set user's avatar:

    Storage::putFileAs('images/avatars/', $request->avatar, $request->accountId, 'private');

and in front-end: (i'm new in front-end and with js)

let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
let myRequest = new Request('avatar');

let myHeaders = new Headers();
myHeaders.append("Accept", "application/json, text-plain, */*");
myHeaders.append("X-Requested-With", "XMLHttpRequest");
myHeaders.append("X-CSRF-TOKEN", token);
myHeaders.append("Content-Type", 'image/jpeg/jpg');

let init = {
    method: 'GET',
    mode: 'cors',
    credentials: 'same-origin',
    headers: myHeaders,
};

fetch(myRequest, init).then((response) => {
    console.log(response);
    return getBody(response);
}).then((data) => {
    console.log(data);
    createAppendElm('img', {
        'src': 'data:image/jpeg;base64,' + btoa(data),
        'alt': 'avatar'
    }, getElm('box'));
});


function createAppendElm(tagName, attributes, parentElm) {
    var elm = document.createElement(tagName);

    for (const attribute in attributes) {
        if (Object.hasOwnProperty.call(attributes, attribute)) {
            const value = attributes[attribute];

            elm.setAttribute(attribute, value);
        }
    }

    parentElm.appendChild(elm);

    return elm;
}

function getBody(response) {
    const contentType = response.headers.get("content-type");

    if (contentType && contentType.indexOf("application/json") !== -1) {
        return response.json();
    } else {
        return response.text();
    }
}

console.log(data) shows the binary content of the picture.(�� ...)
any suggestions?

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
delete a table form a database using laravel command
i need to delete a database table using laravel artisan command . not like this command php artisan migrate:rollback --step=5

i need to create like this route or controller code .

Route::get('/clear/database', function () {
```
    Artisan::call('cache:clear');
    return redirect('/');
```
});

. i also try public function dd()
```
{
    Schema::drop('table_name');
}
```
but it not working . gives me error like this SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails (SQL: drop table table_name)

no foreign key for the table . what should i do ?

thanks in advance!

Foreach for Categories

i have this data, I want to loop with categories for each question. Right now all I can do is loop by displaying sequentially for each question (as in the image).what I want to do is loop and group them based on categories_id , if the categories_id changes it will be given a new line.

 // 20220507095412
// http://127.0.0.1:8000/user/exams

[
  {
    "id": 16,
    "ujians_id": 11,
    "questions_id": 3,
    "mulai": null,
    "berakhir": null,
    "durasi": 60,
    "isAnswer": 0,
    "created_at": "2022-05-07T02:53:56.000000Z",
    "updated_at": "2022-05-07T02:53:56.000000Z",
    "questions": {
      "id": 3,
      "title": "2",
      "question": "<p>Sarana yang sangat masih dalam menyebabkan oposisi dunia yang sering berdampak pada intervensi asing terhadap Indonesia pada era globalisasi sekarang ini adalah...</p>",
      "img": null,
      "categories_id": 1,
      "created_at": "2022-05-07T02:11:41.000000Z",
      "updated_at": "2022-05-07T02:11:41.000000Z"
    }
  },
  {
    "id": 17,
    "ujians_id": 11,
    "questions_id": 1,
    "mulai": null,
    "berakhir": null,
    "durasi": 60,
    "isAnswer": 0,
    "created_at": "2022-05-07T02:53:56.000000Z",
    "updated_at": "2022-05-07T02:53:56.000000Z",
    "questions": {
      "id": 1,
      "title": "13",
      "question": "<p>Wahidin soedirohoesodo memilik peran penting dalam pergerakan kemerdekaan. Antara lain&hellip;22234232</p>",
      "img": null,
      "categories_id": 1,
      "created_at": "2022-05-02T10:39:13.000000Z",
      "updated_at": "2022-05-03T13:28:24.000000Z"
    }
  }
]

@php $no=1 @endphp
                            @foreach($dataUjian as $row)
                                @if($row->isAnswer == 0)
                                    <button class="btn btn-primary btn-sm" onclick="getUjian({{$row->questions_id}}, {{$row->id}},{{$row->ujians->users_id}})" >{{$no++}}</button>
                                @else
                                    <button class="btn btn-danger btn-sm"  disabled>{{$no++}}</button>
                                    @endif
                            @endforeach

Unit testing with get request

I am trying to create a unit test for one of my api.

In the frontend, I send it this way...

params = {
    participants: JSON.stringify(participants),
    section: JSON.stringify(section),
};
axios.get('/api/list', params)

while in the controller, it receives the params this way...

public function list(Request $request)
{
    $participants = json_decode($request->participants);
    $section = json_decode($request->section);

}

Now, I tried making a unit test out of this. by doing...

$params = [
    'participants' => ['id', 'name', 'rating'],
    'section' => ['id', 'code'],
];

$this->get('/api/list'.http_build_query($params))->assertStatus(200)
// $this->json('/api/list', $params)->assertStatus(200) // -> also tried this one
// $this->getJson('/api/list', $params)->assertStatus(200) // -> also tried this one
// $this->call('GET', '/api/list', $params)->assertStatus(200) // -> also tried this one

But none of them works, it always says TypeError: json_decode(): Argument #1 ($json) must be of type string, array given.

So, the way I built the url and the params must be all wrong,

so my question here is that, what's the correct way of building the url so that it provides a correct url string format and the controller will json_decode the params?

Images with Firebase and Python Flask API

I am currently developing an API using Firebase from google and Python's Flask libraries. It is a proyect where I am in need of saving images to the DB and then adress them in the API. I would also like to know how to relate the image to an item in the database, say posting an image of Juan, and that is linked with ALL the information from Juan inside the DB. Thanks!
Need help finding an api or real world data related to read time of people

I need to create a project for which I require real world data of reading time per page or article. Can anyone help me find data or api in which I can get this data I tried to search for some api but they had information related to books instead of their reading time of a person.
Using Websocket Channel in React
I am working on a project where I have to make an api call to a websocket, and display certain information based on that call. As you can see I have used the subscribe portion of the channel in my call. Now I'm not sure what to do if anything with the 2nd two set of bracket. Do I need to include them my call as well, or do they come along with the subscription? And from which of them would I be using the information I need to display? In other words which one is the information I am recieving?

'''
```
const ws = new WebSocket("wss://ws-feed.exchange.coinbase.com");

  const apiCall = {
      type: "subscribe",
      product_ids: [
          "ETH-USD",
          "BTC-USD"
      ],
      channels: ["level2"]
  };

  ws.onopen = (event) => {
    ws.send(JSON.stringify(apiCall));
  };

  ws.onmessage = function (event) {
    const json = JSON.parse(event.data);
    console.log(`[message] Data received from server: ${json}`);
    
    
    };
```
'''
DELETE operation javascript fetch() with REST API firebase
I use the following API request in order to delete all texts (so called cps) of one section (one section contains many cps)
```
await fetch(`https://12345-default-rtdb.europe- 
   west1.firebasedatabase.app/cps/${userId}.json?section_id=${mysection}`,{method:'DELETE',

  //  });
```
userId is correct, mysections is the current sectionId, section_id is the key of the sectionId in the JSON document. (eg: -N09gWdyQlV7OsPpEx7t or -N09g_HjbcFCQFBiIX0A see below) In this example all cps of all sections are being deleted. So the conditional query does not work.

What is going wrong here? Thanks!

The tree within firestore looks like this:

cps -> user1 -> -N09gWdyQlV7OsPpEx7t

cps -> user1 -> -N09g_HjbcFCQFBiIX0A

....
OAuth 2.0 flow using Keycloak with a back-end and front-end?
I'm working on a project that consists of:
- A back-end in Java (JEE project deployed on Wildfly)
- Front-end developed in Angular
- Keycloak for authorization and authentication
What I need to do is:
1. Access my Angular app, which communicates with my backend calling its APIs(e.g GET, POST, PUT, DELETE)
2. Go to the Login Page, authentication is done by Keycloak, so I get directed to Keycloak login page.
3. Login is successfull ----> I get redirected to my Angular landing page, now I can navigate my Angular app.
The frontend is talking with the backend via RESTful APIs, and I need to use OAuth2.0/OPENID standard flow, which means I'm gonna first get the auth code and the the access token/refresh token to stay connected.

My backend is already configurated with Keycloak through the Wildfly adapter given on Keycloak official site, and through web.xml and keycloak.json both in WEB-INF folder.

So known that I'm able to get the auth code via the Valid Redirect URIs given by Keycloak, how can I configure my whole project to get the 3 points written above? Do I need two clients on my Realm in Keycloak?

Can someone please explain me how I can I setup the whole flow using Keycloak?

Thanks a lot!
REST client API data types with laravel

What form of data should I choose as input for a rest api with laravel? form-data, raw, urlencoded or others?

Strange behavior with an ion-avatar in an ion-toolbar

the ion-avatar is not working properly when put into an ion-toolbar.

The following code is working so far, but as soon as I am removing the *ngIf=“data” from ion-img the image is not shown anymore. Since the ngIf is not actually required here this behavior is already strange.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar id="toolbar-avatar" style="width: 25px; height: 25px;">
        <ion-img *ngIf="data" src="{{data.avatarImg}}"></ion-img>
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="myMethod()">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

What I actually want to achieve is to have two ion-avatar and by a condition its decided which one will be shown. For that I am using this code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar *ngIf="condition" id="toolbar-avatar" style="width: 25px; height: 25px;">
        <ion-img *ngIf="data" src="{{data.avatarImg}}"></ion-img>
      </ion-avatar>
      <ion-avatar *ngIf="!condition" id="toolbar-avatar" style="width: 25px; height: 25px;" [style.background]="data.avatarBackgroundColor">
           {{data.someShortText}}
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="myMethod()">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

For this example it doesnt matter if it makes sense to you to have this approach with these two avatars. Anyway, as soon as I add the ngIf to the ion-avatar the thing breaks and none of the avatars is shown plus the entire UI behaves in a strange way. I am using the same approach in some other code parts and its working just fine, this problem just comes up as soon as its used within the ion-header/ion-toolbar. Anyone an info what is going on here or a hint about how to accomplish what I am aiming for?

One last thing: In the Ionic component docs about the ion-avatar the following code snippet is shown:

<ion-avatar>  
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>

Why is always a usual img used in the docs instead of an ion-img ?

Thanks in advance for everything. Cheers

Flutter : Create a User avatar with pop-up image

How to implement this design, I've tried containers and masking. I've tried clipping and containers but it's not working perfectly. The clipping is circular.

Related questions

Having trouble with displaying an image

See also questions close to this topic