Im sorry to ask this because there may be lot of tutorials for multiple file upload in django. but none of them clarified my doubts. Im new to Django please be patient with me.
Below is my django codes:
models.py
class Upload(models.Model):
file = models.FileField(upload_to='images/', default=False)
urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('my_app.urls')),
]
urls.py
urlpatterns = [
path('image', UploadViewSet, name='image'),
]
views.py
class UploadViewSet(viewsets.ModelViewSet):
queryset = Upload.objects.all()
permission_classes = [
permissions.AllowAny
]
serializer_class = UploadSerializer
React
class Design extends Component {
state = {
file: null
}
handleFile(e) {
let file = e.target.files[0]
this.setState({ file: file })
}
handleUpload() {
let file = this.state.file
let formdata = new FormData()
formdata.append('images', file)
console.log('this one:', file)
axios({
url: "http://127.0.0.1:8000/image/",
method: "POST",
data: formdata,
}
).then(res => console.log(res))
}
render() {
return (
<div class="upload">
<h1>Upload Images</h1>
<br />
<br />
<Link to="/">
<button class="btn btn-warning">Back</button>
</Link>
<br />
<br />
<br />
<div className="d-flex p-4 z-depth-2">
<input type="file" multiple name="file" onChange={(e) => this.handleFile(e)} />
</div>
<br />
<br />
<br />
<button onClick={(e) => this.handleUpload(e)} class="btn btn-red">Upload</button>
</div>
);
}
}
export default Design; # <------sorry can't put this inside.
The images are successfully stored in images folder in django from react. but when i upload multiple files from react, django is receiving only one image.
please help me with some good solutions. any solution is appreciable. Thank you in advance.
