Raise MultiValueDictKeyError by request.FILES to get base64 image data
0
Actually i need to get base64 image data generated by croppie javascript library. The image data look like below.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4Xs1dB5xU1dX/39em7c422GXpVZGmWACxImAviYnYY/1UjLF8iYkxxq4xlk+jscZek1iiiUajRiMWehEFAemwLGyfnfravd/v3Dd39zEsxpYyuO7szKv3f8r/nHvueQz/5a9NmzbFMu32KF/ju4JrIwX8XbkQ9WCoFEKU+55fLsBrOBcQnLX6QksLwdOciw7XE43cxwqmsRWciRUJs2bF5MkD8v/Nt8z+2y5uwYIt8Wg0ewDApmoMU4XAHgA0IQQAAfrlc3qvXgK+z8E5hy8EPMEgePCZ4LQHAxcCgtFvxoXgSwDxtg/xNi/zPzxm771z/01j8B8HRAhhLFmyZoLvO1M5F9MMQ5ukaZplmTo0Lbg8AoN+aNADQDT5N2MMmqbJzz3Pg0eAMID7vAgSAcfg+6ILGIlS8eX7vsO4PzuZMN+2DOPvEyaMnccY8/+TAP3HAPnkk8+HeZ44njEczzmfKEeu+KJBNgxA14IBJ2lnNNCcNIGkXpeA6HrwO/hcwBUeCp4jD6UxHa7nw3NpfOk4OmzHCY4JwLJ0xGMxdLa3orY6gdbWZlFRmZyTy2RfjOjm83vvv//G/wQw/3ZAPv109XDOxZVC4DTGmElSHpijbk0wDB2mGQDi+R503ZDmSpolj0MzTKkR9LfEkUChYzAyWb7UEAIgncmisqIanZ2dsG1XnqNffR0K+Rxy2RS456J/fR+0tjbBcWxYuiHNHQBX+PxpnbFf73PIISv/ncD82wD5/POG8a7rXsUY+w75BJJ8Jd0k/TSenPvyt2WZEMKBYWiIx2NdGkDgWZaFznSn1A4CynVd5HI5pDpTyOUyyKQ7kMsV0NHRAcfxkc3kYJgG6uv7Y9y4sXQSNGxaj2GD+iPb0Y5sLovy6t5IpTKoqqyAU7AJe4ADOrkd7rwshPjVxEMPXfDvAOZfDsiyZev6AM5vfC5m+L4Px3Hg2LYUbDIdJM00qLbtwLZt5PN5OHYBPncguCfNDH3e0tqO1tYWtLe3o7OzA+l0BoVCXn7ncw67YEMIH9GIBdO00K9ff1RXV2PSpEmYPv1QbNzQgP796tHe2oqIocFgQCGfgWVFkOc6fNeHYZikZNJ2kgnUNYDRdRBEmvY4GLtywpQpW/+VwPzLALn22mu1fN75Effs64VfSGYzWWSyWWk+tm1rQj6XldKqMy0wN1zAikSk5JMv574vR8b1fRJTGJYlfzQwVJQlkcvlYeg6fN+D47go2AUMHjYMI0eOQrIiiRNPmIEtW7ZIH0THdQt24KSKBEGayaKpZBqJRvAikyWpAKktsToyi4wVHRzrhMBVEw456F7GWDc7+BYR+pcAMnHcuP5xK/qcaRr7m4aOiMal1MbjcRiGAcM0YeiGlGzOSAwZPNftct6WacoB8KSz5mC6BisagaYbknkZhoVCoSBNVXVNDQ455BC0t7Wh36BBGDBwEDra2xGJRqUm0vlI63SivwRycbAD/yNtZ5f/CkAIfFkXQEUAFaOT3wMfAOLkSVOmbP4WsQiu7ds+4HUXX3yc57mP6bpeJW+Qc5jg0Bgr2n0dkWhESmIm78AVQMSKkCzCI23wAs0gjXGJynJPUlZN1+BxH+lMBluaWnDgQQdhzz33RFVVFUzDAJlDAk4zDGnGTNNEc3MzYrGYBIV7HnzXk5JPWkikIEybFVCKYiuw6LjqvQKP/vY5b2fQz5p0yIGvfJtj+K0Bcu+115Y5zLkdgp0fsH9ANwy4NDhMlx/4ni+1ggbLlwOiQ/hMDoxjO3KbINYQKNg2amqqsamhIfAtjo1RY8diQP9+OHjadLS1tyPd2Sm1zvOIDHBp+kjuycSFpZyOqcm4Mohn1EsxPKUZPQ0sARJQ7+B3WHOKRu6BgqZdNmXKlMK3Acy3AsiDt9xSwRneBMMEsrlBGFaUaimV3WZBxgzF2EHnDPDIbnPYji1v2HM9+b2nCXRm0ug7YADqamvRZ0B/DBo0CG3NLehV01uaITW4kg6TdtGZte5BV+DKIJLorCDfvP2gKranAs3SQVXnKAVNmbzAxmGOKfzD954+PfVNQfnGgDx99939Xdf7qw42Vqqy7wdcngWOkdIZQjOkiSAppu+VGSDzRKyGviP2Rf7BcV3U9e2L/sMHY8PmTTjx5FMoaEO+YMNxHURMC14m8A3SFBWjdKkVkq12+1qKYdSAkoZIBx3yG3R99KMGN+xDSr/bGVBd2gYstUxj2p4HHtj8TUD5RoA8eOutwxKx2Luc+wMk5yAACJAig5HRs+fBjEaQy+YkQyI7Lu09SauuI2fbyORzMKIRHPOd49DRmZJOf+jgwWhsbERNTQ1y+bzUGsdzYWo6vIIjzaE0OaQdRTOnPKL0A5IxEUOi/4qBTnGkSp13WEuUU1fbhDUhrCWljl9+J8TnQteOnDxlyuqvC8rXBuTJ224bU+D877FotJbuPpA0Sur5XRJH78lRkzOWrMn14DoOhO+jva0d0bIy7DlhH/QfMADNba2YuN9kNGxtlL6hIl4m/UzY7PTEfugz5aDDUX94QJQ5Cpuf8LFUCob2UecL70+AhTVJgbYTrWmC4NMmT5/+ydcB5WsB8rvbbhtiaNoHruf1JYZDL8oZqcEhmSTzRH9T0Jd3HZkCkS9yG1xg6tSpkqJmszlYEUsCRduS5MsIvuhElYSG0yvhwQkLQBgQGmSlrWrAFTDSlBbZk9pOmTLFssI0V4FEJnJHp96d8lHfcc63WAwH7DNt2tqvCspXBuTBm26q94APhBBDaQDpIummuEcOM6CTrkuDG/gFMh1mLALdNNGnbz3G7rGHTGVQ9Ef7kxmzDBM+xSGeB0s3ZbDnFbOyYWcbHqwwUGGqKjEPZYF70g6lCWq7MLUtpb2lmvZFA6zOJa+NsTVwoxMmHz657auA8pUA+eO995blfHcOBBtNg0bpi1gsKlmU55G/CMwVMSCKG8qTSSSTScQSCewzcYKkrx54EG8U7TvFKTL24EKmUuDLpBa4xiRbC5sWNXDhGwz7gzB4payo1FztzHz1tF8pVf6ibdR0QHCNYl5S06aOnjIl82VB+UqA/OHhh//MII5R1JGcLsUBYBrMSAzNLa2gNMTkyZPl4NfW1cmEIQGgHCf5ka4bkn4wYGVkonSa25ATSwJM7740ZQoJRGV+CBx6HzZfajBoe2VeZKRfzCjT58ofhLVCmSSlMWHTRhpPLzrXl3mV+hqmsVcmTZlCCdUv9frSgDx534OXcu7cSZKvqGtzUxMikQiYbmDM7uMxcPBgrF27DiNHjpRxBdkr2y7IBGEiFkcuk5UBGp1Unljv9jVq0IgxUbygaKeUMxGQBTUwKvVe6hvCgKgBDAAJMsv0T2OBg/a53xWXqGPT5+qY6vzSrGpa10RY6XWVausOgDBGY3DZgYcffteXQeRLAfLob+/cM5vLzNE009SYKX1De0cHopEIpk6bhvr6eqQ701I7JKUtSqRkSTQQxWCQfocpZtjmKumVDr24nTpOmILSdyT9YX8SgEZuyaBwFJ4owIcrzSbnGjRmwUcws0jXyGjCi7SFEVj0u3sYwtqi/FHYD4VzYGHNK6XE4X0YY26hkJ885aij/mkK/58Ccs01P6n1Mva8lubmQeXl1airq0efujocdMgh6GhtlXFCOp3ukmJlIoJZvO4URthZhm9EbackrzRIU4OijqXyUPQ5pWCUOSMt0DUzyAIIB9CDbIHvMxhaBIy54NyFLzyYEYOSUeA++S1KblpdU8Jhhx/2T0rySzVICVApIKXakM/n1ycj1h7/LJr/p4AcfvCBjx9xxJFnxOMJ1NX2we67j5P2PpVKSXMlqaquS5+hLqpUbcNOUd2wkqAwNVXfqZsJ23IFnGR0RaCVWVJaSdlgafIoX0azf8QPaNA1HQbz4IgChAlwgwJKE5aIA64OwbLymOrYSqhKM8FhHxTWnu3SKEUTq4RO3QsRHcuMPLH/YdPO/CLT9YWAPPnoQwdVlFf9Y/SoMfLmPKcQTJfyYFJJpS4kOSoyp7CqlgKh/g6zIeUjlIaUUtieLr7UlKljEJWmFIrGdRgwUMjnkSiPIefmoZlJOKYHlOfRmm1AR0s7mte1YK+RE1BulO+Qcg+fVwERNlfqs7BGld5fWHsIkEgkCuGLKQccMf0fOwNlp4AsW7bMMpm/tJBzdiVzQFG4Jv1BkIsK23x1IWFJCQ+sujC6COV4w9KnpE0626IPKqWWSmpVIBf2M+o76MEciu6bMGGgM9OGRI2FrEjh844l+MPbz8OJZVHTK4nekQE4ZNRx6GsNQ9SLdGVze/JbdP2lpqpLCIojW6oRasBVlpgAiUaj8Fy+sibdPm70jBlUjbHDa6eAfPbJJ9dms5lrKBLnxcIBJphkSWqwv0iaw0xI2X3l0NVFKtNGx1HapgY3DI4yJbQfbae0UdFedTzNpOSkD803EdEttGQaYdZwvL/0Dcxa/xx4TQE5cNhpDeNqpuGk8ReitzcYHlq6TFZYYNQ1hK8vnC0u1ZiwGVMjrdI6ASAxWaTh+P7Ppx9zxC1fGpAlc5fs4rr5pbqpRbjMmPoBY/E4GA+qRIiYBFIRnmFTMyH0WVCaE3bWYbMUdphKc3YGcKlzDWuoMhlSgjUypwKaTzOLOrJ+BxpSG/C3j15DZCDDitQC2FYKum9gj+T+mLHHuahy+sBmlFHojlGUxocBCfsudR89aUXpZ0pYaHaTfK7vUe7NTdsuG3Xk947cYcaxRw35ePbsxznnZwTRdHeJjpztL5nkCT
Here is my HTML
<form action="{% url 'profile' %}" enctype="multipart/form-data" method="post" class="pic-upload-form" id="form">{% csrf_token %}
<div class="custom-file">
{% bootstrap_form form %}
</div>
<!-- Croppie area -->
<div id="upload-demo"></div>
<input type="hidden" id="image-data" name="imagebase64">
<button type="button" class="btn btn-outline-info btn-custom upload-result">save</button>
</form>
The last portion of my js where i bind the image data to a hidden input.
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
size: 'viewport'
}).then(function (src) {
console.log(src);
// bind the image data to the hidden inpu id image-data
$('#image-data').attr('src', src);
$('#form').submit();
});
});
And here is my view
def user_profile_view(request):
'''Handle the image of the user.'''
if request.method == 'POST':
form = UploadPicForm(request.POST, request.FILES)
if form.is_valid():
profile = form.save(commit=False)
# get the base64 image data
profile.image = request.FILES['imagebase64']
profile.save()
messages.success(request, 'your pic updated successfully.')
return HttpResponseRedirect(reverse('learning_path_tracker:home'))
else:
# form's user field populated by current user
form = UploadPicForm(initial={'user': request.user})
return render(request, 'users/uploadpic.html', {'form': form})
I think the image data is not a string that's why request.FILES raise error. But how can i solve this, thanks in advance.
django croppie
asked Jan 1 at 12:07
squal squal
105110
add a comment |
0
Actually i need to get base64 image data generated by croppie javascript library. The image data look like below.
data:image/png;base64,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
Here is my HTML
<form action="{% url 'profile' %}" enctype="multipart/form-data" method="post" class="pic-upload-form" id="form">{% csrf_token %}
<div class="custom-file">
{% bootstrap_form form %}
</div>
<!-- Croppie area -->
<div id="upload-demo"></div>
<input type="hidden" id="image-data" name="imagebase64">
<button type="button" class="btn btn-outline-info btn-custom upload-result">save</button>
</form>
The last portion of my js where i bind the image data to a hidden input.
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
size: 'viewport'
}).then(function (src) {
console.log(src);
// bind the image data to the hidden inpu id image-data
$('#image-data').attr('src', src);
$('#form').submit();
});
});
And here is my view
def user_profile_view(request):
'''Handle the image of the user.'''
if request.method == 'POST':
form = UploadPicForm(request.POST, request.FILES)
if form.is_valid():
profile = form.save(commit=False)
# get the base64 image data
profile.image = request.FILES['imagebase64']
profile.save()
messages.success(request, 'your pic updated successfully.')
return HttpResponseRedirect(reverse('learning_path_tracker:home'))
else:
# form's user field populated by current user
form = UploadPicForm(initial={'user': request.user})
return render(request, 'users/uploadpic.html', {'form': form})
I think the image data is not a string that's why request.FILES raise error. But how can i solve this, thanks in advance.
django croppie
asked Jan 1 at 12:07
squal squal
105110
add a comment |
0
0
0
Actually i need to get base64 image data generated by croppie javascript library. The image data look like below.
data:image/png;base64,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
Here is my HTML
<form action="{% url 'profile' %}" enctype="multipart/form-data" method="post" class="pic-upload-form" id="form">{% csrf_token %}
<div class="custom-file">
{% bootstrap_form form %}
</div>
<!-- Croppie area -->
<div id="upload-demo"></div>
<input type="hidden" id="image-data" name="imagebase64">
<button type="button" class="btn btn-outline-info btn-custom upload-result">save</button>
</form>
The last portion of my js where i bind the image data to a hidden input.
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
size: 'viewport'
}).then(function (src) {
console.log(src);
// bind the image data to the hidden inpu id image-data
$('#image-data').attr('src', src);
$('#form').submit();
});
});
And here is my view
def user_profile_view(request):
'''Handle the image of the user.'''
if request.method == 'POST':
form = UploadPicForm(request.POST, request.FILES)
if form.is_valid():
profile = form.save(commit=False)
# get the base64 image data
profile.image = request.FILES['imagebase64']
profile.save()
messages.success(request, 'your pic updated successfully.')
return HttpResponseRedirect(reverse('learning_path_tracker:home'))
else:
# form's user field populated by current user
form = UploadPicForm(initial={'user': request.user})
return render(request, 'users/uploadpic.html', {'form': form})
I think the image data is not a string that's why request.FILES raise error. But how can i solve this, thanks in advance.
django croppie
asked Jan 1 at 12:07
squal squal
105110
Actually i need to get base64 image data generated by croppie javascript library. The image data look like below.
data:image/png;base64,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
Here is my HTML
<form action="{% url 'profile' %}" enctype="multipart/form-data" method="post" class="pic-upload-form" id="form">{% csrf_token %}
<div class="custom-file">
{% bootstrap_form form %}
</div>
<!-- Croppie area -->
<div id="upload-demo"></div>
<input type="hidden" id="image-data" name="imagebase64">
<button type="button" class="btn btn-outline-info btn-custom upload-result">save</button>
</form>
The last portion of my js where i bind the image data to a hidden input.
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
size: 'viewport'
}).then(function (src) {
console.log(src);
// bind the image data to the hidden inpu id image-data
$('#image-data').attr('src', src);
$('#form').submit();
});
});
And here is my view
def user_profile_view(request):
'''Handle the image of the user.'''
if request.method == 'POST':
form = UploadPicForm(request.POST, request.FILES)
if form.is_valid():
profile = form.save(commit=False)
# get the base64 image data
profile.image = request.FILES['imagebase64']
profile.save()
messages.success(request, 'your pic updated successfully.')
return HttpResponseRedirect(reverse('learning_path_tracker:home'))
else:
# form's user field populated by current user
form = UploadPicForm(initial={'user': request.user})
return render(request, 'users/uploadpic.html', {'form': form})
I think the image data is not a string that's why request.FILES raise error. But how can i solve this, thanks in advance.
django croppie
django croppie
asked Jan 1 at 12:07
squal squal
105110
asked Jan 1 at 12:07
squal squal
105110
asked Jan 1 at 12:07
squal squal
105110
asked Jan 1 at 12:07
squal squal
105110
asked Jan 1 at 12:07
squal squal
105110
105110
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
request.FILES only contain the files uploaded using input type="file". Whereas you're sending the image data as a base64 using type="hidden" which sends data as string, not as file.
So, the image should be present in request.POST instead of request.FILES.
Do this:
profile.image = request.POST['imagebase64']
As a side note, instead of accessing keys directly from a dictionary, you should use the dict's get() method because it let's you provide a default value if the requested key is not present in the dictionary.
profile.image = request.POST.get('imagebase64', "default value")
answered Jan 1 at 16:40
xyresxyres
9,74732445
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
@squal Isprofile.imageanImageFieldor something else?
– xyres
Jan 1 at 20:40
Yes, that isImageField
– squal
Jan 1 at 21:02
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
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
});
}
});
draft saved
draft discarded
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%2f53995301%2fraise-multivaluedictkeyerror-by-request-files-to-get-base64-image-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
request.FILES only contain the files uploaded using input type="file". Whereas you're sending the image data as a base64 using type="hidden" which sends data as string, not as file.
So, the image should be present in request.POST instead of request.FILES.
Do this:
profile.image = request.POST['imagebase64']
As a side note, instead of accessing keys directly from a dictionary, you should use the dict's get() method because it let's you provide a default value if the requested key is not present in the dictionary.
profile.image = request.POST.get('imagebase64', "default value")
answered Jan 1 at 16:40
xyresxyres
9,74732445
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
@squal Isprofile.imageanImageFieldor something else?
– xyres
Jan 1 at 20:40
Yes, that isImageField
– squal
Jan 1 at 21:02
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
add a comment |
1
request.FILES only contain the files uploaded using input type="file". Whereas you're sending the image data as a base64 using type="hidden" which sends data as string, not as file.
So, the image should be present in request.POST instead of request.FILES.
Do this:
profile.image = request.POST['imagebase64']
As a side note, instead of accessing keys directly from a dictionary, you should use the dict's get() method because it let's you provide a default value if the requested key is not present in the dictionary.
profile.image = request.POST.get('imagebase64', "default value")
answered Jan 1 at 16:40
xyresxyres
9,74732445
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
@squal Isprofile.imageanImageFieldor something else?
– xyres
Jan 1 at 20:40
Yes, that isImageField
– squal
Jan 1 at 21:02
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
add a comment |
1
1
1
request.FILES only contain the files uploaded using input type="file". Whereas you're sending the image data as a base64 using type="hidden" which sends data as string, not as file.
So, the image should be present in request.POST instead of request.FILES.
Do this:
profile.image = request.POST['imagebase64']
As a side note, instead of accessing keys directly from a dictionary, you should use the dict's get() method because it let's you provide a default value if the requested key is not present in the dictionary.
profile.image = request.POST.get('imagebase64', "default value")
answered Jan 1 at 16:40
xyresxyres
9,74732445
request.FILES only contain the files uploaded using input type="file". Whereas you're sending the image data as a base64 using type="hidden" which sends data as string, not as file.
So, the image should be present in request.POST instead of request.FILES.
Do this:
profile.image = request.POST['imagebase64']
As a side note, instead of accessing keys directly from a dictionary, you should use the dict's get() method because it let's you provide a default value if the requested key is not present in the dictionary.
profile.image = request.POST.get('imagebase64', "default value")
answered Jan 1 at 16:40
xyresxyres
9,74732445
answered Jan 1 at 16:40
xyresxyres
9,74732445
answered Jan 1 at 16:40
xyresxyres
9,74732445
answered Jan 1 at 16:40
xyresxyres
9,74732445
9,74732445
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
@squal Isprofile.imageanImageFieldor something else?
– xyres
Jan 1 at 20:40
Yes, that isImageField
– squal
Jan 1 at 21:02
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
add a comment |
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
@squal Isprofile.imageanImageFieldor something else?
– xyres
Jan 1 at 20:40
Yes, that isImageField
– squal
Jan 1 at 21:02
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
Appreciate with you, but how do i check profile.image gets the data?@xyres
– squal
Jan 1 at 19:47
@squal Is
profile.image an ImageField or something else?– xyres
Jan 1 at 20:40
@squal Is
profile.image an ImageField or something else?– xyres
Jan 1 at 20:40
Yes, that is
ImageField– squal
Jan 1 at 21:02
Yes, that is
ImageField– squal
Jan 1 at 21:02
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
@squal In that case you'll have to upload the image as a regular file instead of base64.
– xyres
Jan 1 at 21:04
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
I need to save the croped image deliver by croppie javascript library. For this time, I am able to send the base64 image data to the view, but not still able to save that. What should i do now? By the way i am here learning to handle to decode the base64 image data.
– squal
Jan 1 at 21:14
add a comment |
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
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%2f53995301%2fraise-multivaluedictkeyerror-by-request-files-to-get-base64-image-data%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
