Enhance File Upload UX with Better User Feedback and Controls

[luisawatkins]

Current UX Issues

1. Missing File Restrictions Info

   • No file size limits shown before upload
   • No supported file types indicated
   • Users only discover restrictions after failed uploads

2. Limited Upload Progress Feedback

   • Basic progress bar without detailed status
   • Generic status messages
   • No estimated time remaining

3. Missing Upload Controls

   • No way to cancel ongoing uploads
   • No pause/resume functionality
   • No retry option for failed uploads

Proposed Changes

1. Add Pre-upload Information:

<div className="text-sm text-gray-500 mt-2">
  <p>Maximum file size: 100MB</p>
  <p>Supported formats: .jpg, .png, .pdf, .doc</p>
</div>

2. Enhanced Progress Updates:

<div className="upload-progress">
  <div className="status-details">
    <p>{bytesUploaded} of {totalBytes} ({percentage}%)</p>
    <p>Estimated time: {timeRemaining}</p>
    <p>Current phase: {currentPhase}</p>
  </div>
  <ProgressBar 
    progress={progress}
    phase={currentPhase}
    showDetails={true}
  />
</div>

3. Upload Controls:

<div className="upload-controls">
  <Button 
    onClick={handleCancel}
    disabled={!isUploading}
  >
    Cancel Upload
  </Button>
  {uploadError && (
    <Button onClick={handleRetry}>
      Retry Upload
    </Button>
  )}
</div>

Tasks

• Add file restrictions display
• Implement detailed progress tracking
• Add upload cancellation
• Create error retry mechanism
• Add helpful tooltips
• Update documentation