React - Allow user to add file from gallery or camera

Multi tool use
Multi tool use












0















I have a react-redux site which allows user to drag and drop files from file system,
now I want to let them do the same on mobile-
add a screenshot from camera, or file from gallery.



For the drag & drop on desktop I'm using the react-dropzone package.



Any help will be appreciated!










share|improve this question



























    0















    I have a react-redux site which allows user to drag and drop files from file system,
    now I want to let them do the same on mobile-
    add a screenshot from camera, or file from gallery.



    For the drag & drop on desktop I'm using the react-dropzone package.



    Any help will be appreciated!










    share|improve this question

























      0












      0








      0








      I have a react-redux site which allows user to drag and drop files from file system,
      now I want to let them do the same on mobile-
      add a screenshot from camera, or file from gallery.



      For the drag & drop on desktop I'm using the react-dropzone package.



      Any help will be appreciated!










      share|improve this question














      I have a react-redux site which allows user to drag and drop files from file system,
      now I want to let them do the same on mobile-
      add a screenshot from camera, or file from gallery.



      For the drag & drop on desktop I'm using the react-dropzone package.



      Any help will be appreciated!







      reactjs mobile camera gallery






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 3 at 9:02









      NNHNNH

      62




      62
























          2 Answers
          2






          active

          oldest

          votes


















          0














          You can use this code from there documentation:
          It allows user to click on the DropZone and opens a file picker:



          class Basic extends React.Component {
          constructor() {
          super()
          this.state = {
          disabled: true,
          files:
          }
          }

          onDrop(files) {
          this.setState({files});
          }

          toggleDisabled() {
          this.setState({
          disabled: !this.state.disabled
          })
          }

          render() {
          const files = this.state.files.map(file => (
          <li key={file.name}>
          {file.name} - {file.size} bytes
          </li>
          ))

          return (
          <section>
          <aside>
          <button
          type="button"
          onClick={this.toggleDisabled.bind(this)}
          >
          Toggle disabled
          </button>
          </aside>
          <div className="dropzone">
          <Dropzone
          onDrop={this.onDrop.bind(this)}
          >
          {({getRootProps, getInputProps}) => (
          <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>Drop files here, or click to select files</p>
          </div>
          )}
          </Dropzone>
          </div>
          <aside>
          <h4>Files</h4>
          <ul>{files}</ul>
          </aside>
          </section>
          );
          }
          }

          <Basic />


          enter image description here






          share|improve this answer
























          • I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

            – NNH
            Jan 3 at 10:11











          • Which error are you getting?

            – Harish Soni
            Jan 3 at 10:13






          • 1





            you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

            – NNH
            Jan 3 at 11:27



















          0














          The right answer is that react-dropzone does works well (as of harish soni's answer)
          but it depends on the mobile version:
          react-dropzone makes using of 'input type="file"' html element which is not supported by all mobile devices.



          for better mobile support understanding refer here






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019106%2freact-allow-user-to-add-file-from-gallery-or-camera%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You can use this code from there documentation:
            It allows user to click on the DropZone and opens a file picker:



            class Basic extends React.Component {
            constructor() {
            super()
            this.state = {
            disabled: true,
            files:
            }
            }

            onDrop(files) {
            this.setState({files});
            }

            toggleDisabled() {
            this.setState({
            disabled: !this.state.disabled
            })
            }

            render() {
            const files = this.state.files.map(file => (
            <li key={file.name}>
            {file.name} - {file.size} bytes
            </li>
            ))

            return (
            <section>
            <aside>
            <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
            >
            Toggle disabled
            </button>
            </aside>
            <div className="dropzone">
            <Dropzone
            onDrop={this.onDrop.bind(this)}
            >
            {({getRootProps, getInputProps}) => (
            <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drop files here, or click to select files</p>
            </div>
            )}
            </Dropzone>
            </div>
            <aside>
            <h4>Files</h4>
            <ul>{files}</ul>
            </aside>
            </section>
            );
            }
            }

            <Basic />


            enter image description here






            share|improve this answer
























            • I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

              – NNH
              Jan 3 at 10:11











            • Which error are you getting?

              – Harish Soni
              Jan 3 at 10:13






            • 1





              you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

              – NNH
              Jan 3 at 11:27
















            0














            You can use this code from there documentation:
            It allows user to click on the DropZone and opens a file picker:



            class Basic extends React.Component {
            constructor() {
            super()
            this.state = {
            disabled: true,
            files:
            }
            }

            onDrop(files) {
            this.setState({files});
            }

            toggleDisabled() {
            this.setState({
            disabled: !this.state.disabled
            })
            }

            render() {
            const files = this.state.files.map(file => (
            <li key={file.name}>
            {file.name} - {file.size} bytes
            </li>
            ))

            return (
            <section>
            <aside>
            <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
            >
            Toggle disabled
            </button>
            </aside>
            <div className="dropzone">
            <Dropzone
            onDrop={this.onDrop.bind(this)}
            >
            {({getRootProps, getInputProps}) => (
            <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drop files here, or click to select files</p>
            </div>
            )}
            </Dropzone>
            </div>
            <aside>
            <h4>Files</h4>
            <ul>{files}</ul>
            </aside>
            </section>
            );
            }
            }

            <Basic />


            enter image description here






            share|improve this answer
























            • I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

              – NNH
              Jan 3 at 10:11











            • Which error are you getting?

              – Harish Soni
              Jan 3 at 10:13






            • 1





              you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

              – NNH
              Jan 3 at 11:27














            0












            0








            0







            You can use this code from there documentation:
            It allows user to click on the DropZone and opens a file picker:



            class Basic extends React.Component {
            constructor() {
            super()
            this.state = {
            disabled: true,
            files:
            }
            }

            onDrop(files) {
            this.setState({files});
            }

            toggleDisabled() {
            this.setState({
            disabled: !this.state.disabled
            })
            }

            render() {
            const files = this.state.files.map(file => (
            <li key={file.name}>
            {file.name} - {file.size} bytes
            </li>
            ))

            return (
            <section>
            <aside>
            <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
            >
            Toggle disabled
            </button>
            </aside>
            <div className="dropzone">
            <Dropzone
            onDrop={this.onDrop.bind(this)}
            >
            {({getRootProps, getInputProps}) => (
            <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drop files here, or click to select files</p>
            </div>
            )}
            </Dropzone>
            </div>
            <aside>
            <h4>Files</h4>
            <ul>{files}</ul>
            </aside>
            </section>
            );
            }
            }

            <Basic />


            enter image description here






            share|improve this answer













            You can use this code from there documentation:
            It allows user to click on the DropZone and opens a file picker:



            class Basic extends React.Component {
            constructor() {
            super()
            this.state = {
            disabled: true,
            files:
            }
            }

            onDrop(files) {
            this.setState({files});
            }

            toggleDisabled() {
            this.setState({
            disabled: !this.state.disabled
            })
            }

            render() {
            const files = this.state.files.map(file => (
            <li key={file.name}>
            {file.name} - {file.size} bytes
            </li>
            ))

            return (
            <section>
            <aside>
            <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
            >
            Toggle disabled
            </button>
            </aside>
            <div className="dropzone">
            <Dropzone
            onDrop={this.onDrop.bind(this)}
            >
            {({getRootProps, getInputProps}) => (
            <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drop files here, or click to select files</p>
            </div>
            )}
            </Dropzone>
            </div>
            <aside>
            <h4>Files</h4>
            <ul>{files}</ul>
            </aside>
            </section>
            );
            }
            }

            <Basic />


            enter image description here







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 3 at 9:15









            Harish SoniHarish Soni

            919321




            919321













            • I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

              – NNH
              Jan 3 at 10:11











            • Which error are you getting?

              – Harish Soni
              Jan 3 at 10:13






            • 1





              you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

              – NNH
              Jan 3 at 11:27



















            • I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

              – NNH
              Jan 3 at 10:11











            • Which error are you getting?

              – Harish Soni
              Jan 3 at 10:13






            • 1





              you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

              – NNH
              Jan 3 at 11:27

















            I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

            – NNH
            Jan 3 at 10:11





            I know how to use this somponent- but it's not working for me on mobile, and this is what I asked for

            – NNH
            Jan 3 at 10:11













            Which error are you getting?

            – Harish Soni
            Jan 3 at 10:13





            Which error are you getting?

            – Harish Soni
            Jan 3 at 10:13




            1




            1





            you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

            – NNH
            Jan 3 at 11:27





            you are right, the problem was with my server side code for file upload, not the react-dropzone problem. so this question can be closed, thanks.

            – NNH
            Jan 3 at 11:27













            0














            The right answer is that react-dropzone does works well (as of harish soni's answer)
            but it depends on the mobile version:
            react-dropzone makes using of 'input type="file"' html element which is not supported by all mobile devices.



            for better mobile support understanding refer here






            share|improve this answer




























              0














              The right answer is that react-dropzone does works well (as of harish soni's answer)
              but it depends on the mobile version:
              react-dropzone makes using of 'input type="file"' html element which is not supported by all mobile devices.



              for better mobile support understanding refer here






              share|improve this answer


























                0












                0








                0







                The right answer is that react-dropzone does works well (as of harish soni's answer)
                but it depends on the mobile version:
                react-dropzone makes using of 'input type="file"' html element which is not supported by all mobile devices.



                for better mobile support understanding refer here






                share|improve this answer













                The right answer is that react-dropzone does works well (as of harish soni's answer)
                but it depends on the mobile version:
                react-dropzone makes using of 'input type="file"' html element which is not supported by all mobile devices.



                for better mobile support understanding refer here







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 3 at 11:32









                NNHNNH

                62




                62






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019106%2freact-allow-user-to-add-file-from-gallery-or-camera%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    MOSOWx 6J4BOK2r5y hRw,nKy3zg1zuAaA21,XbBpSR,s06hS8uHOn,eBnamjdjmLdXBu1,Y uVVDki5GB gUkrJCJqHo
                    kQU,ZZD 2kBhlV5neSqMz6Z AuTuf9stK,6VFrGQ41SErMwiKmpMlyawIBUy 8XkD,AwDtAC C5bx U n6G7rp0tfXWvi LDAhgpzC

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas