Проблема в том, что мой код работает только для загрузки изображений с компьютера. А при загрузке с мобильного телефона (айфон) просто создаётся запись в базе данных. В этой записи присутствуют ссылки на эти фотографии, но когда я пытаюсь их открыть - получаю ошибку 403. Когда пытаюсь вручную сменить эти фото с админ страницы - получаю ту же ошибку - 403.
models.py
from djlime.utils import get_file_path class RequestUser(models.Model): main_photo = models.ImageField(_('main_photo'), upload_to=get_file_path) profile_photo = models.ImageField(_('profile_photo'), upload_to=get_file_path) @property def upload_dir(self): return 'accounts/request_user/images'
forms.py
class IdentificationForm(forms.ModelForm): class Meta: model = RequestUser fields = ('main_photo', 'profile_photo', ) widget= { 'main_photo': forms.FileInput( attrs={ 'style': 'display: none', } ), 'profile_photo': forms.FileInput( attrs={ 'style': 'display: none', } ) } def __init__(self, *args, **kwargs): super(IdentificationForm, self).__init__(*args, **kwargs) self.fields['main_photo'].widget.attrs = {'class':'file_dnl'} self.fields['profile_photo'].widget.attrs = {'class':'file_dnl'} def clean_image(self): cd_image = self.cleaned_data['main_photo'] return cd_image def clean_image2(self): cd_image = self.cleaned_data['profile_photo'] return cd_image
views.py
def identification_view(request): if request.method == 'POST': form = IdentificationForm(request.POST, request.FILES) if request.is_ajax(): main_photo = request.FILES.get('file1') profile_photo = request.FILES.get('file2') RequestUser.objects.create( user = request.user, main_photo = main_photo, profile_photo = profile_photo ) return HttpResponse('image upload success') else: form = IdentificationForm() identifications = RequestUser.objects.filter(user = request.user) return render(request, 'accounts/identification.html', {'form': form, 'identifications': identifications})
identification.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" class="edit_form new_event" enctype="multipart/form-data" method="POST"> <input type='hidden' name='csrfmiddlewaretoken' value='bBfv5mapMAVzI35UGp0H4LfbKR9avG4id6Me01bRZfAefjzKwcL3xj1lDiLBBR5L' /> <div class="field inline"> <div class="subhead">Main photo:</div> <input type="file" name="main_photo" required class="file_dnl" id="id_main_photo" /> <label for="foto1" class="id_foto"> <div class="addPhoto"> <div class="button" id='foto1_button'></div> </div> </label> <div id='profile_photo' style='display:none; text-align:center'></div> </div> <div class="field inline"> <div class="subhead">Profile photo:</div> <input type="file" name="profile_photo" required class="file_dnl" id="id_profile_photo" /> <label for="foto2" class="id_foto"> <div class="addPhoto"> <div class="button" id='foto2_button'></div> </div> </label> <div id='profile_photo' style='display:none; text-align:center'></div> </div> <div class="center"> <button class="submit mgln" type='button'>Submit</button> </div> </form>
$("input[name='main_photo']").change(function(){ var filename = $(this).val().replace(/.*\\/, ""); console.log(filename) $("#main_photo").html(filename).css('display', 'block'); }); $("input[name='profile_photo']").change(function(){ var filename = $(this).val().replace(/.*\\/, ""); console.log(filename) $("#profile_photo").html(filename).css('display', 'block'); }); $('#foto1_button').on('click', function(){ document.getElementById("id_main_photo").click(); }); $('#foto2_button').on('click', function(){ document.getElementById("id_profile_photo").click(); }); var token = 'bBfv5mapMAVzI35UGp0H4LfbKR9avG4id6Me01bRZfAefjzKwcL3xj1lDiLBBR5L'; $('.mgln').on('click', function(){ formData = new FormData(); formData.append('file1', $('input[name=main_photo]')[0].files[0]) formData.append('file2', $('input[name=profile_photo]')[0].files[0]) $.ajax({ headers: { "X-CSRFToken": token }, type: "POST", url: "/identification/", data: formData, processData: false, contentType: false, success: function(result) { alert('Ok.'); }, error: function(result) { alert('Not ok.'); } }) })