I have a CustomUser Model with following fields
class CustomUser(AbstractUser):
image = models.ImageField(upload_to='images/',blank=True,null=True)
email = models.EmailField(_('email address'), unique=True)
fullname = models.CharField(null=True,max_length=40)
dob = models.DateField(default=date.today)
phonenumber = models.CharField(max_length=10, blank=True)
passportnumber = models.CharField(max_length=10, blank=True)
I am trying to have a progress bar for the image upload so I have two forms in single page as follows
<body>
<div class='row'>
<div class='col-sm-3'></div>
<div class="col-sm-6 ">
<h4>Register</h4>
<form id="uploadform" method=POST enctype=multipart/form-data action="/upload/">
{% csrf_token %}
<input type=file id="media" name=media ;>
<input type="submit" onclick='copy_url(document.getElementById("media").files[0].name)'>
</form>
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<form id="registerform"method="post" enctype="multipart/form-data">
{% csrf_token %}
<!-- <div class="form-group ">
<label>Image</label>
<input name="image" type="file" value="">
</div> -->
<div class="form-group ">
<input id="image" name="image" type="hidden" value="">
</div>
<div class="form-group ">
<label>Email address</label>
<input name="email" class="form-control" type="email" value="">
</div>
<div class="form-group ">
<label>Fullname</label>
<input name="fullname" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Dob</label>
<input name="dob" class="form-control" type="date" value="">
</div>
<div class="form-group ">
<label>Phonenumber</label>
<input name="phonenumber" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Passportnumber</label>
<input name="passportnumber" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Username</label>
<input name="username" class="form-control" type="text" value="">
<span class="help-block">Required. 150 characters or fewer. Letters, digits and @/./+/-/_
only.</span>
</div>
<div class="form-group ">
<label>Password</label>
<input name="password" class="form-control" type="text" value="">
</div>
<div class="form-group ">
<label>Confirm password</label>
<input name="confirm_password" class="form-control" type="text" value="">
</div>
<!-- <label for="{{ serializer.fullname.id_for_label }}">Fullname:</label>
<input type="text" id ="{{ serializer.fullname }}"><br/>
<label for="{{ serializer.dob.id_for_label }}">Dob:</label>
<input type="date" id ="{{ serializer.dob }}"><br/> -->
<!-- {% render_form serializer %} -->
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</body>
After uploading the image. I want that image to be stored in my model for the corresponding user.How do I do that?
I am using ajax for the progress bar
$(document).ready(function(){
$('#uploadform').on('click', function(event){
event.preventDefault();
var formData = new FormData($('#uploadform')[0]);
$.ajax({
xhr: function(){
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress',function(e){
if(e.lengthComputable){
console.log('Bytes Loaded :' + e.loaded)
console.log('Total Size:' + e.total)
console.log('Percentage Uploaded:' + e.loaded/e.total)
var percent = Math.round(e.loaded / e.total * 100);
$('#progress-bar').attr('aria-valuenow',percent).css('width',percent+'%').text(percent+'%')
}
})
return xhr;
},
type : 'POST',
url : '/upload/',
data : formData,
processData : false,
contentType : false,
success : function(response){
var fs = response
alert('File uploaded!');
}
})
});
});
I tried to pass the location of the image uploaded in form1 say /images/photo.jpeg to the imagefield but it throws error. How do I pass that to the imagefield ???
