A simple, not fancy at all, image upload.
Features include:
- Upload image through file input
- Drag and drop image upload
- Hosting image through
FileReaderAPI - Simple image type validation
- Decorate image with border
- Customize border color and thickness
Built using:
- Vue
- Google Fonts - Happy Monkey
Play around with it on CodePen
Or see it live! here
Here are the general steps to create your own Not Fancy Image Upload. You need to understand 2 concepts in dealing with your image Upload. To handle our image upload, we need to utilize 2 APIs:
1. File API
This will allow you to interact with your local files. The File API will give us access to a FileList which contains the File object. The File object will have all of the metadata about the image that was uploaded. It is what we will use to pass to our FileReader.
2. FileReader API
The FileReader API is what will allow use to create a local url that can be used as the src of our image element. It reads the content of our File object asynchronously. So we need to trigger the onload event when the load finishes, so we can access the result attribute that will our src url.
<input
type="file"
@change="onFileChange"
accept="image/*">methods: {
onFileChange(e) {
// Extract the FileList
const fileList = e.target.files;
// Destructure the File from the Filelist
const [file] = filesList;
// Generate our src url with the FileReader API
const reader = new FileReader();
// Encode our file data as a "data url" (base64 format)
reader.readAsDataURL(file);
// Once the FileReader finish loading,
// trigger the onload event to extract the url
reader.onload = (e) => {
this.imageUrl = e.target.result;
}
}
}<img :src="imageUrl">We're going to utilize HTML Drag and Drop API to create a drop zone. The 2 events we're going to call are:
dragover: This event is fired when the dragged image is moving withint our drop zone.
drop: This event is fired when the user drops the image into our drop zone.
<div
@dragover.prevent
@drop.stop.prevent="dropImage"
></div>methods: {
dropImage(e) {
const fileList = this.validateImageFile(e.dataTransfer.files);
// The rest follows the same step as #A-2
}
}<img :src="imageUrl">To center an image with position absolute. We need to use both the transform and left property.
CSS left property is based on the size of the parent element.
CSS transform property is based on the the size of the target element.
left 50% will move the element exactly at the center of the main container where this element belongs! BUT translateX(50%) will move the element right exactly to 50% of its width,and NOT at the center of the whole Container element!
.parent {
position: relative;
}
img {
position: absolute;
/* This will move the element exactly at the center of the parent container */
left: 50%;
/* This will re-adjust the element right exactly to 50% of its own width */
transform: translateX(-50%);
}