You are tasked with simulating a file upload operation where users can upload a file by providing the file name and a validation number. The upload process should simulate a delay of 2 seconds and return a promise based on validating the file name and the number.
Upon clicking the Upload button, display a message Uploading: 0% in the p tag with the class status-message in a blue font color to indicate the process has started. The progress should update every 500 milliseconds and show percentages in the format Uploading: 25%, Uploading: 50%, and Uploading: 75% during the 2-second process.
The file upload will succeed if the file name has an extension of .doc or .pdf and the validation number is divisible by 7. If these conditions are met, the promise should resolve with the message, File uploaded successfully! . If either condition fails, the promise should reject with the message, File upload failed! Invalid file or check value. . Display the success or failure message in the p tag with the class status-message, styled with green or red font color, respectively.
Additionally, make sure that the message File upload process completed. is displayed in the p tag with the class completion-message, styled with a darkgray font color, regardless of the upload outcome. This message should automatically disappear after 3 seconds.
Your task is to implement the handleUpload function to simulate the file upload process, update progress in real-time, and handle success, failure, and completion messages appropriately.
We are not displaying the answer for this exercise.
We do this because we want you to challenge yourself
and
not give in to the temptation of looking at the solution.
We also don't want to leave you stuck, so if you feel
you have tried enough and are still unable to solve
this exercise, feel free to ask in our community.
Here is the link to join the community.