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?

Community · Accepted Answer · 2021-10-07 05:54:43Z

10

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" />

edited Oct 7, 2021 at 5:54

CommunityBot

11 silver badge

answered Apr 15, 2015 at 21:27

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olivier Pons Over a year ago

In my case for tar and tar.bz2 this was 'application/gzip, .tar, .tar.bz2'

Collectives™ on Stack Overflow

Form file accept type in ReactJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related