jdegand / image-uploader

DevChallenges - Legacy - Full Stack Developer - Image Uploader

Image Uploader

Solution for a challenge from Devchallenges.io.

Table of Contents

• Overview
  • Built With
• How To Use
• Features
• Requirements
• Useful Resources

Overview

• This uses a signed signature.

• You have to use NEXT_PUBLIC otherwise env variables will be undefined.

• Make sure to build so env variables are loaded.

• Next JS really helps for signing the upload as it protects your secret and saves you from coding an express server.

• Cloudinary has an example where a whole express server is required.

• I limited it to single file uploads - to render multiple uploads have to do extra looping when uploading & rendering the image / link.

• target _blank now includes noopener by default but nextjs warns you without rel="noreferrer" (which includes noopener)

• need performance optimizations to lower first page load (133kb). CSS file seems large for limited css here. The CSS in the components may be expensive.

• You have to refresh after uploading an image.

• If you upload an svg, the public cloudinary link will prompt you to download the file to see it.

• if you drop an image, the button's 'no file chosen' will still display. However, the file is saved and can be uploaded.

• I decided to remove it with conditional rendering. Set title attribute of file input to uploadedFile state value?

• You have to manually add a language attribute to a next js project. See Github for more about this. I find this a little bizarre and something that I guarantee users of create-next-app take for granted.

Built With

• Next
• Cloudinary
• React DND

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/jdegand/image-uploader

# Install dependencies
$ npm install

# Add env variables from cloudinary

# Run the app
$ npm run build
$ npm run start

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

Requirements

• I can drag and drop an image to upload it
• I can choose to select an image from my folder
• I can see a loader when uploading
• When the image is uploaded, I can see the image and copy it
• I can choose to copy to the clipboard

Useful Resources

• Steps to replicate a design with only HTML and CSS
• Dev.to - file upload
• YouTube - Tutorial
• ReactGo - change favicon in nextjs
• CodeSandbox - react dnd file drop example
• YouTube - Colby Fayock Image Uploader Tutorial
• YouTube - React DropZone Image Uploader with multiple files
• YouTube - React Uploader with Drag and Drop
• Stack Overflow - can't see what's inside FormData?
• W3 Schools - copy to clipboard
• Stack Overflow - react copy to clipboard
• Github - 400 bad request
• Unicode Table - checkmark
• Stack Overflow - _blank
• Blog - set html lang attribute in nextjs
• A11y Project - how to hide content
• Stack Overflow - file input styling
• Stack Overflow - title attribute of file input