Brian Emil Hartz

let me = enjoy ( pondering ( javascript ( reactjs ) ) )

Upload Image File Component Fun


I'm currently building a couple little apps to digest, catalog, and display heel clicking's from my worldly adventures.

While building the image processing app I needed to upload the images to an express server. This proved to be a very awesome learning experience that I have felt like sharing in order to help others and probably myself again down the road.

The React File Upload Component

See the Pen React Image Preview & Upload by Brian Emil Hartz (@hartzis) on CodePen.

Component Includes Preview of Image

When submitted it will trigger the callback that fires the below ajax call with the image file.

XHR/Ajax Image Upload

The Server Side Image Save and Copy

Along with express I needed to npm install 'multiparty'. This example uses multiparty to parse the form data and extract the image file information. Then 'fs' to copy the temporarily upload image to a more permanent location.

I am now working on reprocessing the images to standard sizes and thumbnails using 'lwip'.

Please hit me up if you have problems and questions, I'm more than willing to help anyone doing this too!