Initial commit

resources/js/SubmissionsClass/MainImageManager.js

@@ -0,0 +1,151 @@
+export function MainImageManager() {
+
+    return {
+
+        /**
+         * If an image has been uploaded or not.
+         * @type {boolean}
+         */
+        uploaded: false,
+
+        /**
+         * Actual image path on the server.
+         * @type {string|null}
+         */
+        serverFilePath: null,
+
+        /**
+         * Image filename.
+         * @type {string|null}
+         */
+        name: null,
+
+        /**
+         * Image filetype.
+         * @type {string|null}
+         */
+        type: null,
+
+        /**
+         * Handle preview.
+         * @type {unknown}
+         */
+        preview: null,
+
+        /**
+         * Current error message.
+         * @type {string}
+         */
+        error: null,
+
+        /**
+         * Reload image if there is an error.
+         *
+         * @param {string|null} oldPath If there is already a path.
+         */
+        init( oldPath = null ){
+            if(oldPath === "" || oldPath === null)
+                return;
+
+            this.getOldImage(oldPath)
+        },
+
+        /**
+         * Get old image from old path and refresh preview.
+         * @param {string} oldPath
+         * @param {function|null} callback Used in the gallery to push the image at the right time.
+         */
+        getOldImage( oldPath, callback = null ) {
+            this.readOldImage( '/storage/' + oldPath ).then( blob => {
+
+                this.uploaded = true;
+                this.serverFilePath = oldPath;
+
+                const READER = new FileReader();
+                READER.onload = () => {
+                    this.preview = READER.result;
+                }
+                READER.readAsDataURL(blob);
+            });
+        },
+
+        /**
+         * Get old image data.
+         * @param {string} url
+         * @returns {Promise<Blob>}
+         */
+        async readOldImage(url){
+            const RESPONSE = await fetch(url);
+            return await RESPONSE.blob();
+        },
+
+        async uploadImageToTemporary( file ){
+
+            const CSRF = document.querySelector('meta[name=csrf-token]')?.content ?? '';
+            const URL = `/api/tempfile/upload`;
+
+            const formData = new FormData();
+
+            formData.append('file', file);
+            formData.append('_token', CSRF );
+
+            try {
+                const RESPONSE = await fetch( URL, { method: 'POST', body: formData } );
+
+                if( !RESPONSE.ok ) // Problem with the request.
+                    throw new Error(`${RESPONSE.status} ${RESPONSE.statusText}`);
+
+                const DATA = await RESPONSE.json();
+
+                if( DATA.path === null ){
+                    throw new Error(`${RESPONSE.status} ${RESPONSE.statusText}`);
+                }
+
+                this.serverFilePath = DATA.path;
+                this.uploaded = true;
+
+            } catch (err){
+                this.error = 'Error on main image uploading ' + ( i + 1 ) + '. ' + err.message;
+                console.error( this.error );
+                return;
+            }
+        },
+
+        /**
+         * Upload image, refresh the preview and store image if there is a problem.
+         *
+         * @param {Event} e
+         */
+        async handleSubmitFile(e) {
+            const FILE = e.target.files[0];
+            if (!FILE)
+                return; // No file uploaded.
+
+            this.handleRemoveFile(null);
+            await this.uploadImageToTemporary(FILE);
+
+            this.name = FILE.name;
+            this.type = FILE.type;
+
+            const READER = new FileReader();
+            READER.onload = (e2) => {
+                this.preview = e2.target.result;
+            }
+            READER.readAsDataURL(FILE);
+        },
+
+        /**
+         * Remove main image.
+         * @param {Event} e
+         */
+        handleRemoveFile(e){
+            this.uploaded = false;
+            this.serverFilePath = null;
+            this.preview = null;
+            this.name = null;
+            this.type = null;
+            this.error = null;
+        }
+
+    }
+}