React - Allow user to add file from gallery or camera

Multi tool use
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
add a comment |
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
add a comment |
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
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
reactjs mobile camera gallery
asked Jan 3 at 9:02
NNHNNH
62
62
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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 />
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
add a comment |
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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 />
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
add a comment |
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 />
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
add a comment |
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 />
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 />
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
add a comment |
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
add a comment |
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
add a comment |
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
add a comment |
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
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
answered Jan 3 at 11:32
NNHNNH
62
62
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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