Form file accept type in ReactJS

Question

I have a simple form:

<form className="form-horizontal form-border" enctype="multipart/form-data">
     <div className="form-group">
         <label className="col-sm-3 control-label">Name</label>
         <div className="col-sm-4">
             <input type="text" className="form-control" ref="patch_name" required="" placeholder="Patch name" />
         </div>
     </div>

     <div className="form-group">
         <label className="col-sm-3 control-label">Description</label>
         <div className="col-sm-4">
             <input type="text" className="form-control" ref="patch_description" required="" placeholder="Patch description" />
         </div>
     </div>

     <div className="form-group">
         <label className="col-sm-3 control-label">Patch File</label>
         <div className="col-sm-4">
             <input type="file" accept="compress/*" name="patch_file" />
         </div>
     </div>

     <div className="form-group">
         <div className="col-sm-3" />
         <div className="col-sm-1">
             <input type="submit" className="btn btn-primary btn-block" value="Create Patch" />
         </div>
     </div>
 </form>

I want to be able to only accept tar.gz file uploads. The only "type" I've been able to get was image/*.

Where can I get a list of types?

score 5 · Accepted Answer · edited May 23 '17 at 12:00

This doesn't have anything to do with React. Take a look at this answer, which describes how to use the HTML accept attribute: File input 'accept' attribute - is it useful?

The correct MIME type for .gz files is application/gzip. There is no official MIME type for .tar.gz (since .tar.gz isn't actually a file format, but rather a naming convention for a TAR file inside a gzip file). Sometimes application/x-gtar is used, but it's nonstandard (hence the x-) and YMMV. You can also use file extensions in accept, but support is spotty and none of the browsers I tested in handled the two dots in .tar.gz as we might expect.

The HTML specification has the following note:

Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format.

With that in mind, your best bet is probably this:

<input type="file" accept="application/gzip, .gz" />

In my case for tar and tar.bz2 this was `'application/gzip, .tar, .tar.bz2'` — Olivier Pons, Aug 02 '19 at 17:28

Form file accept type in ReactJS

1 Answers1