*** App may not work due to trial expiring
A small project to make an image uploading and hosting app. Image hosting through a free tier account (trial) on Microsoft Azure. Hosed images can be saved to User array and retrieved with URL for reference on User's profile page.
Images are sent to my storage container on Azure, and retrieved from the container and displayed on the page, with URL.
Lessons learned from building this project:
- File uploading
- File hosting platform
- Saving and retrieving images to User file
- Using .env in react
- Learning to use new tech:
- Formik;
- Yup;
- Multer;
graphql-upload;- react-dropzone
- Cloud Storage platform with MS Azure Blob Storage
- Implement cloud hosting first, rather than uploading. Harder to get cloud into working uploading code, than uploading into working cloud hosting code.
git clone https://github.com/sifzerda/ImageUp.git
cd imageUp
npm install
npm run startImage hosting through Microsoft Azure Blob Storage.
I added "type": "module" to the root package-json because I was getting an ES5 error:
"name": "main",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "server/server.js",- Uploaded images are hosted on MS Azure.
- Image URLs can be saved in local storage and retrieved in the 'Saved' tab.
- User can make an account and save image URLs to the user's imageURL model array. These are retrieved in the 'Profile' tab.
Tech used:
- axios: promise-based JavaScript library and API to make asynchronous HTTP requests.
- react-dropzone: library for handling 'drag-and-drop' file uploads.
- multer: middleware for handling file uploading.
- cors: security package to manage cross-origin requests.
- formik: react library for form building and processing.
- yup: schema builder for value parsing and validation.
- There's a copy of ImageUp (4) in the copies folder without formik and yup.
cloudinary: media hosting on cloud. Tried to use this for image hosting storage but didn't work.Amazon: media hosting on cloud. Tried but took out.Google: media hosting on cloud. Tried but took out.- azure/storage-blob: Client library providing object/file storage in cloud.
- 'const handleUpload': uploads image and also sends to MS Azure cloud container.
- 'const handleSave': onclick handler which writes uploaded image to logged in user's imageUrls array.
- 'const handleDrop': manages dropping an image into the drop zone.
- 'const handleSaveToLocal': writes the uploaded image to user's local storage.
- 'const openModal' and 'const closeModal': fxs for modal opening and closing.
N/A
Cloud Storage Services:
- Amazon S3: Provides scalable object storage. You can use AWS SDKs or libraries like aws-sdk to interact with S3. [issue: couldn't create user]
- Google Cloud Storage: Similar to S3, but part of Google Cloud Platform. Use @google-cloud/storage to interact with it. [had some issue implementing]
- Microsoft Azure Blob Storage: Offers scalable storage with integration through Azure SDKs.
- firebase -- [free but had some issue implementing]
Image Hosting Services:
- Cloudinary: Provides an image and video management service with APIs for uploading, storing, and manipulating images. It also offers free tiers and easy integration.
- Imgur: A popular image hosting service with a straightforward API. Good for smaller projects or testing. (not free)
- Flickr: Offers image hosting with API access. It's more oriented towards photo-sharing but can be used for hosting as well.
Custom Hosting:
- Your Own Server: You can host images on your own server or infrastructure. This gives you full control but requires more setup and maintenance.
- CDN Services: Using Content Delivery Networks like Cloudflare or Fastly can help cache and serve images more efficiently.
- Integrated Hosting with CMS:
- WordPress: If using WordPress as a CMS, you can use its media library to host images.
- Strapi: A headless CMS that can manage and serve media files. (not free, 14 day trial)
- Could not get Firebase cloud service to host images, will try with new component
- Some of the cloud services have fees attracting use over certain limit
- There are two separate image modal components (ImageModal and ProfileModal) because ImageModal wouldn't display on the profile for some reason, so I had to make a new one. They each separate entries/selectors in CSS file.
- create image uploading
- upload multiple images
- store uploaded images
- local storage -- in 'saved' nav tab
[ ] if user logged on[ ] restrict image uploading to registered users and when upload images, auto save to their user record - to retrieve when site returned to
-
images get unique url so they can be viewed image alone on separate page (i.e. openeed as new tab and linked in url and shared)- image opens in a modal on uploaded page and profile page
- make some graphql queries and mutations to store uploaded cloud images urls to be retrievable when users log in again
- fix up .env related issue
- Delete saved images from Profile
- Delete saved images from Saved
For support, users can contact tydamon@hotmail.com.
Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (git checkout -b feature/NewFeature)
- Commit your Changes (git commit -m 'Add some NewFeature')
- Push to the Branch (git push origin feature/NewFeature)
- Open a Pull Request
The author acknowledges and credits those who have contributed to this project, including:
- ChatGPT
Distributed under the MIT License. See LICENSE.txt for more information.
This project is complete.