Sunday 29 August 2021

Image Uploader - React

I'm trying  to upload image with React. Source code copied from:

https://www.geeksforgeeks.org/file-uploading-in-react-js/

Image upload required post API call eg, App.js#line39

axios.post("http://localhost:8000/api/imageupload", formData).then(resp => {
console.log(resp.data);
});

API is Lumen. Source code is named scr-webservice.

  • source code directory: ~/my/scr-webservice.
  • source code tool: phpstorm
  • url: http://localhost:8000/
  • Database is currently (29/8/21) pointing to winhost by ~/my/scr-webservice/.env
  • database tool: phpstorm


Post call:

http://localhost:8000/api/imageupload


There is a very good video of image upload using React.js:

https://www.youtube.com/watch?v=XeiOnkEI7XI

Talks about axios post call at video 4:20, but using Firebase, which takes another learning time.

Found another good site talking about React and Lumen connection:



Made it work to return result from API call.





I could xdebug as well. But only from Postman. I couldn't make XDebug work ...
  • From: react website localhost:3000
  • To: API localhost:8000 (LUmen)





XDEBUG from react site to API code didn't work. (in spite of correct settings)




Image passed from Postman.


Saved in uploads folder. and shows correctly!











Tuesday 24 August 2021

Git cloning in another machine

 I wanted to update scr-webservice code to test uploading images.

The Github repository was created under my matthewoh93 google account.

When I tried to git clone the repo in my dell ubuntu laptop, it was giving below error.



This is because my dell laptop has ssh key bound to matthew.oh@executestrategy.net account.

I tried to add the ssh key into my github, but it didn't work. It returned that 'Key exists already' error.


I don't know what it means, but basically, the ssh key in the machine (matthew.oh@exec) cannot be used in this case (matthewoh93@gmail).

The only solution was inviting matthew.oh@exec into my personal account as collaborator.

The menu is somewhere collaborator invite etc ...

YOu get email invitation.


Accept it. Run git clone again. Voila, it worked.



Now you run lumen. But have errors because other dependencies not installed.



RUn composer install and you get all files. Voila again, Lumen web API is working on your new machine!