У меня есть jquery код, который обрезает фото. И я хочу отправлять это фото ajax запросом
Как то получал данные через ajax, а с загрузкой совсем голову сломал
<form id="your-form" action method="POST" enctype="multipart/form-data">
{% csrf_token %}
<profile-meta>
<avatar>
<img src="{{ profile.profile_image.url }}" alt="Аватар" draggable="false">
<edit-overlay>
<button>
{% csrf_token %}
<label class="avatar-add" for="upload-avatar"><img src="{% static 'images/plus_v2.svg' %}" alt=""></label>
<input type="file" name="image" id="upload-avatar">
</button>
</edit-overlay>
</avatar>
</profile-meta>
{% csrf_token %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let edit = 0;
let array = ["[input='link']"];
let coversrc, avatarsrc;
function enableEdit() {
$('username').before(editbtns);
$("profile-meta > avatar input[type=file]").attr("id","upload-avatar");
$('profile-meta > avatar edit-overlay > button').append(foto);
}
function disableEdit() {
$('btns').remove();
$('crop').remove();
croppie = null;
}
function editmode(array){
let el;
if (!edit) {
edit = 1;
enableEdit();
}
}
$(document).ready(function() {
coversrc = $('profile > canopy > img').attr('src');
avatarsrc = $('profile-meta > avatar > img').attr('src');
editmode(array);
console.log("Edit profile");
});
const foto = '<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24"><rect fill="none"/><path d="M3,4V1h2v3h3v2H5v3H3V6H0V4H3z M6,10V7h3V4h7l1.83,2H21c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2V10H6z M13,19c2.76,0,5-2.24,5-5s-2.24-5-5-5s-5,2.24-5,5S10.24,19,13,19z M9.8,14c0,1.77,1.43,3.2,3.2,3.2s3.2-1.43,3.2-3.2 s-1.43-3.2-3.2-3.2S9.8,12.23,9.8,14z"/></svg>';
const editcover = '';
const editbtns = '';
const left = '<svg viewBox="0 0 24 24" class="r-jwli3a r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M20 11H7.414l4.293-4.293c.39-.39.39-1.023 0-1.414s-1.023-.39-1.414 0l-6 6c-.39.39-.39 1.023 0 1.414l6 6c.195.195.45.293.707.293s.512-.098.707-.293c.39-.39.39-1.023 0-1.414L7.414 13H20c.553 0 1-.447 1-1s-.447-1-1-1z"></path></g></svg>';
//////////////////// CROP
let croppie = null,
ele;
$(document).on("click","crop back",function(e){
if(e.which == 1){
if(e.target != this) return;
$("#upload-avatar").val('');
$("crop").remove();
croppie.destroy();
}
});
let uploadtype;
$(document).on("change","#upload-avatar",function(e){
let h, w, oh, ow, s, txt;
if(croppie != null){
croppie = null;
}
if($("dim").length <= 0){
$("dim").remove();
}
if($(this).is('#upload-avatar')){
console.log('avatar');
w=h = 300;
ow=oh = 350;
ow=400;
s = 'circle';
txt = 'Аватар';
uploadtype = 'avatarupload';
}
$("body").append("<crop><div class='crop-container'><btns><flex><back>"+left+"</back><span>"+txt+"</span></flex><button id="+uploadtype+">Применить</button></btns><div id='resizer'></div></div></crop>");
ele = document.getElementById('resizer');
croppie = new Croppie(ele, {
viewport: {
width: w,
height: h,
type: s
},
boundary: {
width: ow,
height: oh
},
enableOrientation: true,
enableExif: true
});
$.getImage(e.target, croppie);
});
$.getImage = function(input, croppie) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
croppie.bind({
url: e.target.result,
});
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).on("click", "#avatarupload", function() {
croppie.result('base64').then(function(base64) {
if (uploadtype === "avatarupload") {
$("profile-meta > avatar > img").attr("src", base64);
var formData = new FormData($('#your-form')[0]);
// Append the base64 image data to the formData
formData.append('image', base64);
// Add CSRF token to formData
formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
// Send AJAX request
$.ajax({
url: '{% url "edit-account" %}', // Update with the correct URL
type: 'POST', // Use POST for updating data
data: formData,
cache: false,
processData: false,
contentType: false,
success: function(data) {
if (data.success) {
console.log('Profile image updated successfully');
} else {
console.error('Error updating profile image:', data.errors);
}
},
error: function(error) {
console.error('AJAX Error:', error);
}
});
}
});
$("#upload-avatar").val('');
$("crop").remove();
croppie.destroy();
});
</script>
@login_required(login_url='login')
def editAccount(request):
profile = request.user.profile
form = ProfileForm(instance=profile)
if request.method == 'POST':
form = ProfileForm(request.POST, request.FILES, instance=profile)
if form.is_valid():
form.save()
return redirect('user-profile', request.user.profile.id )
else:
form = ProfileForm(instance=profile, initial={'receive_notifications': profile.receive_notifications})
context = {'form': form, 'profile': profile}
return render(request, 'users/profile-form.html', context)
