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?