File and Image Upload

this documentation provides a detailed explanation of how to handle file and image uploads in your application, including file size validation, preparing form data, and interacting with the upload api function onoversize description the onoversize function checks if the uploaded file exceeds the maximum allowed size and displays a notification if it does code const onoversize = (file) => { console log('the file size cannot exceed 30mb'); }; usage parameters file the file object to be checked behavior displays a toast notification if the file size exceeds 30mb function afterread description the afterread function processes the file after it has been read, prepares it for upload, and calls the uploadfile function to handle the actual upload code function afterread(file) { const formdata = new formdata(); formdata append('file', file file); // call the upload api uploadfile(formdata) then(res => { if (res code == 200 && res data && res data length) { imagestore addimage(res data); } }) catch(err => { showtoast('image upload failed'); console log(err); }); } usage parameters file the file object that has been read behavior creates a formdata object and appends the file calls the uploadfile function to upload the file adds the uploaded image to imagestore if the upload is successful displays an error toast if the upload fails function uploadfile description the uploadfile function uploads the given file to the server using a post request and returns the response code const uploadfile = async (formdata) => { const response = await fetch('https //tmp file aigic ai/api/v1/upload?expires=1800\&type=image/png', { method 'post', body formdata }); const data = await response json(); return data; }; usage parameters formdata the formdata object containing the file to be uploaded behavior sends a post request to the upload api endpoint returns the response data workflow file selection and validation the user selects a file the onoversize function checks if the file size exceeds 30mb if it does, a toast notification is shown file upload the afterread function is called with the selected file a formdata object is created and the file is appended to it the uploadfile function is called with the formdata object api interaction the uploadfile function sends a post request to the upload api endpoint if the upload is successful, the response data is added to the imagestore if the upload fails, a toast notification is shown and the error is logged example usage // assuming this is part of a vue component onmounted(() => { // file input event listener document getelementbyid('fileinput') addeventlistener('change', (event) => { const file = event target files\[0]; if (file size > 30 1024 1024) { onoversize(file); } else { afterread({ file }); } }); }); notes ensure the api endpoint (https //tmp file aigic ai/api/v1/upload) and parameters (expires and type) are correctly set as per your backend requirements handle exceptions and errors gracefully to provide a good user experience customize the toast notifications as needed for your application by following this documentation, developers can easily integrate file and image upload functionality into their applications, ensuring proper validation, handling, and error management