Customize uploads with call back functions

FastPix provides flexible callback functions that allow developers to pause, resume, or abort the upload process as needed. This gives users greater control over the upload flow, enhancing their experience, particularly in situations like unstable network conditions or when dealing with large files. By leveraging these functions, you can offer a smoother, more responsive interaction during file uploads.

Pause and resume actions during upload

To implement pause and resume functionality in your upload process using the <fp-upload> component, you can follow the example provided below. This example demonstrates how to create custom buttons for pausing and resuming the upload and wire them up to the <fp-upload> component's methods.

<style> 

.upload-button { 

  background: #5d9d3a; 
  color: white; 
  border-radius: .35em; 
  border: 0; 
  cursor: pointer; 
  height: 50px; 
  width: 220px; 
} 

.progress-status { 
  color: cadetblue; 
  font-size: medium; 
  text-decoration: underline; 
} 

.retryButton { 

  height: 40px; 
  width: 120px; 
  background-color: #ceb40e; 
  color: #FFF; 
  border: 0px; 
  border-radius: 20px; 
  margin-top: 10px; 

} 

 

.pauseBtn { 
  height: 50px; 
  width: 120px; 
  background-color: rgb(198, 198, 203); 
  border: 0px; 
  cursor: pointer; 
  color: aliceblue; 
  border-radius: 10px; 
} 

 

.resumeBtn { 

  height: 50px; 
  width: 120px; 
  background-color: rgb(24, 186, 51); 
  margin-left: 20px; 
  border: 0px; 
  cursor: pointer; 
  color: white; 
  border-radius: 10px; 

} 

 

.container { 

  width: 100%; 
  display: flex; 
  flex-direction: row; 
  margin-top: 30px; 
  justify-content: center; 

} 

 

fp-upload { 
  --uploader-progress-fill-color: #0f0f0f; 
} 

</style> 

 

<fp-upload endpoint="" id="webUploads"> 

</fp-upload> 

 

<div class="container"> 

  <div> 

  <button id="pausebtn" class="pauseBtn">Pause</button> 

  </div> 

<div> 

<button id="resumebtn" class="resumeBtn">Resume</button> 

  </div> 

</div> 

<script> 
  const uploader = document.getElementById('webUploads'); 
  const pasueButton = document.getElementById("pausebtn") 
  const resumeButton = document.getElementById('resumebtn') 
  pasueButton.addEventListener('click', () => { 
  uploader.pause() 
  }) 
  resumeButton.addEventListener('click', () => { 
  uploader.resume() 
  }) 
</script>

Key insights:

• Pause and resume: The pause() and resume() methods allow you to control the upload manually, offering flexibility in case of network interruptions or user-driven pauses.
• Styling and feedback: Use CSS to design user-friendly buttons for pausing and resuming uploads. Providing visual feedback (e.g., disabling the pause button while paused) ensures a smoother user experience.

📘

Important note

• If the upload is paused, no further chunks will be upload untill resume() is called.
• You can disable the resume button after clicking pause, and vice versa, to prevent accidental multiple pause or resume

Personalize uploads with Functions

With FastPix, you can create custom web upload c omponents to handle video uploads seamlessly. By leveraging the functions and events, you can build a robust upload experience that suits your application's needs. Here’s how you can get started and gain access to the various functionalities

< !--Define the FastPix upload component, initially hidden with display: none.Set an endpoint and provide an ID for easy reference. -- > 

 

<fp-upload style="display:none;" endpoint="" id="webUploads"> 

</fp-upload> 

 

<script> 
    // Get the upload component by its ID for interacting with it via JavaScript. 

    const uploader = document.getElementById('webUploads'); 

    // Pause the ongoing upload. 
    uploader.pause(); 

    // Resume a paused upload. 
    uploader.resume(); 
    
    // Abort the current upload process. 
    uploader.abort(); 

    // Retry the upload process. 
    uploader.retryUpload();
    
    // Start uploading a file. The file to be uploaded should be passed as an argument. 
    uploader.uploadFile(file); 

</script>

Key functions

• pause(): Temporarily halts the upload process. This can be useful if the user needs to pause for any reason, such as switching networks or saving bandwidth.
• resume(): Resumes the upload process after it has been paused, allowing the upload to continue from where it left off.
• abort(): Completely stops the upload process. Use this when the user decides not to continue with the upload or if an issue requires the upload to be canceled.
• retryUpload(): If an upload fails, the retryUpload() method allows the user to retry the process without having to restart everything from the beginning.
• uploadFile(file): Directly uploads a file programmatically. You need to pass the file object to this function.

Customization tips

• Custom buttons: You can create custom buttons for controlling uploads (e.g., pause, resume, retry) that fit the style and functionality of your application.
• Event-driven UI updates: You can tie the functions to events such as button clicks, file selection, or upload progress to keep users informed and in control of the upload process.

📘

ADDITIONAL NOTES

• Always ensure that the file size and upload process are displayed to users. It helps them understand how long the upload will take and whether the pause or resume actions are neccessary.
• Hide the upload component with display: none when controlling uploads manually through buttons or other UI elements. It gives complete control over the user interface without showing the default upload UI