aico-image-editor/src/data/dragdrop.js

Combine multiple image into and create single combined image

//import Alpine from "alpinejs";

Alpine.data('dragdrop', () => ({
    dropping: false,
    filesUploaded: false,
    dragOverHandler(event) {
        event.preventDefault();
        this.dropping = true;
    },
    dragLeaveHandler() {
        this.dropping = false
    },
    sizeValidated: true,
    extensionsValidated: true,
    extensions: [],
    alertFileValidationFail(files,fileType, extensions) {
        

        // alert only single time for any validation fail case
        const sizeValidated = files.every(file =>  this.validateFileSize(file));
        const extensionsValidated = files.every(file =>  this.validateFileExtensions(file, extensions));

        this.sizeValidated = sizeValidated;
        this.extensionsValidated = extensionsValidated;
        this.extensions = extensions;

        // if(!sizeValidated) {
            
        //     alert('File size should be less than 5MB');
        // }
        // if(!extensionsValidated) {
        //     alert('only ' + extensions +  ' files are allowed');
        // }


        //filter out the files which follows both validation
        const validatedFiles = files.filter(file => {
            return this.validateFileSize(file) && this.validateFileExtensions(file, extensions)
        })

        if(validatedFiles.length) {
            this.dispatchFileEvents(validatedFiles, fileType);
        }

        
        
    },
    fileUploaded(event,fileType,extensions) {
        //if(! event.target.files.length) return;
        this.alertFileValidationFail([...event.target.files], fileType, extensions)
        
        this.filesUploaded = true;
    },
    bytesToMegaBytes(bytes) {
        return (bytes / (1024*1024)).toFixed(2);
    },
    maxAllowedFileSize: 15,
    validateFileSize(file) {
        let fileSizeInMb = this.bytesToMegaBytes(file.size);
        return !(fileSizeInMb > this.maxAllowedFileSize)
    },
    validateFileExtensions(file,extensions) {
        let fileExtension = file.name.split('.').pop();
        return extensions.indexOf(fileExtension) >= 0;
       
    },
    getDataUrlFromFile(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
          reader.readAsDataURL(file);
        });
    },
    async dispatchFileEvents(files,fileType) {
        const dataUrl = await this.getDataUrlFromFile(files[0]);
        
        if(fileType === 'shape') {
            this.$store.shapeCropperModalStore.displaySelectedImage({
                originalShapeFile: files[0],
                fileName:  files[0].name,
                url: dataUrl,
                cropperData: null
            });
        } else if(fileType === 'background') {
            this.$store.bgshapeCropperModalStore.displaySelectedBackground({
                originalBackgroundFile: files[0],
                fileName:  files[0].name,
                url: dataUrl,
                cropperData: null
            });
        } else if (fileType === 'mainPicture') {
            this.$store.pictureCropperModalStore.displaySelectedPicture({
                originalBackgroundFile: files[0],
                fileName:  files[0].name,
                url: dataUrl,
                cropperData: null
            });
        } else {
            window.dispatchEvent(new CustomEvent(fileType + '-uploaded', {
                detail: {
                    files: files
                }
            }));
        }
    },
    dropHandler(event,fileType,extensions) {
        if(event.dataTransfer.items) {
            const filesFromItems = [...event.dataTransfer.items].filter(item => item.kind === 'file').map(item => item.getAsFile());
            this.alertFileValidationFail(filesFromItems, fileType, extensions);
            
        } else {
            this.alertFileValidationFail([...event.dataTransfer.files], fileType, extensions);
        }
        this.dropping = false;
    }

}))