rhand's avatar
Level 6

Store Unsplash Image based on Axios.get request

Trying to store data from Axios.get calling images from Unsplash Request here. VueJS side of things can be read about in earlier thread:

[ https://laracasts.com/discuss/channels/javascript/axiosget-then-axiospost-to-store-images-from-api-on-server ](axios get and post from Unsplash API) .

I have the following Axios get request which I use to load data from Unsplash:

saveSearchedUnsplashPhotoToServer : function(result) {
                axios.get(result.urls.full, { results: result.urls.full } )
                .then(this.handleSuccessfulSave)
                .catch(this.catch);
            }, // 204 and 200 status

This grabs the Unsplash image for me. Here example headers

Request URL: https://images.unsplash.com/photo-1431032843361-ec2cd229c751?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjI3NTk2fQ&s=2e8916bb1f05d2eda3b50042b07846fc
Request Method: GET
Status Code: 200  (from disk cache)
Remote Address: 151.101.140.188:443
Referrer Policy: no-referrer-when-downgrade

Now I need a controller to store the image and upload it to a specific directory where I can retrieve it from later. And as you can see no form is used. Just an Axios get request knocking on the Unsplash api door.

Been reading on https://github.com/axios/axios/issues/1195 about using something like:

<?php

$entityBody = file_get_contents('php://input');

file_put_contents(__DIR__ . '/output.txt', print_r(json_decode($entityBody), true));

But I am not quite sure about it yet as they base it on an axios.post request:

axios = require('axios');

var param = {
   args: {
      myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
   }
};

axios({
   method: 'post',
   url: 'http://home.test/post.php',
   data: param,
});

And I currently only have the get request cause I am getting it from Unsplash... That besides the fact that file_get_contents('php://input') looks like voodoo to me.

I also tried the following using URLSearchParams (polyfill needed):

saveSearchedUnsplashPhotoToServer : function(result) {
                const params = new URLSearchParams();
                params.append('results', result.urls.full);
                axios({
                    method: 'post',
                    url: '/backend/upload-image',
                    client_id: '111',
                    data: params
                });
            },

but the results seem to be empty as I get an error 500. Though the image form data is

results: https://images.unsplash.com/photo-1510274460854-4b7ad642d3a9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjI3NTk2fQ&s=9abb8a8983b9c6fb434466522d3af9aa

Laravel does mention this however

Symfony\Component\Debug\Exception\FatalThrowableErrorPOST /backend/upload-image
Call to a member function isValid() on null

referring to my method in progress:

public function uploadUnsplashImage(Request $request)
    {
        //$path = $request->result->store('/editor/upload-image');
        // $request_body = file_get_contents('php://input');
        // file_put_contents(__DIR__ . '/output.txt', print_r(json_decode($entityBody), true));

        if (!$request->file('result')->isValid()) {
            return $this->respondFailedWithError(400, "The file is not uploaded successfully.");
        }
.....

So it still is not getting the file.

Somehow still think I should stick to axios.get with PHP storage anyways. Question is how can I do this?

0 likes
1 reply
rhand's avatar
rhand
OP
Best Answer
Level 6

Something with file_get_contents and file_put-contents got me further again

$file =  $request->request->get('results');
        $current = file_get_contents($file);
        $this->uploadedFile = $current;
        $this->location = '/uploads/' . $this->currentProject->id . '/';
        $this->uploadDir = public_path() . $this->location;
        $current = file_put_contents($this->uploadDir . "boe2", $current);

Please or to participate in this conversation.