Image de Django ajax upload avec django-ajax-téléchargement-widget sur Amazon s3 - Stack Overflow

here's the question: i have a normal Createview submitted via .ajax with an email and a filefield. I tried using django-ajax-upload-widget to manage image/file upload and it works perfect locally. When i use it on prod with Amazon i can see that it uploads the file on his own folder in S3 ( /ajax_uploads) but when i submit it doesn't save the model. I thought it was caused by the extended filename of s3 (signature.. expires..) but it's not that.

model:

class Iscrizione3(models.Model):

    email = models.EmailField(max_length=70, unique= True)
    created = models.DateTimeField(auto_now_add=True)
    allegato = models.FileField(upload_to=".")
    creator = models.ForeignKey(User)


    def __unicode__(self):
        return u"%s" % (self.email)

view:

class provaajax(CreateView):
    model = Iscrizione3
    form_class = CreaIscrizioneForm3
    template_name = "landing/pezzoform.html"

    def form_valid(self, form):
        """
        If the request is ajax, save the form and return a json response.
        Otherwise return super as expected.
        """
        if self.request.is_ajax():
            self.object = form.save(commit=False)
            self.object.creator = self.request.user
            self.object.save()
            return HttpResponse(json.dumps("success"),
                mimetype="application/json")
        return super(provaajax, self).form_valid(form)

    def get_success_url(self):
        return reverse2("landing7")

form:

from apps.ajax_upload.widgets import AjaxClearableFileInput

class CreaIscrizioneForm3(forms.ModelForm):
    class Meta:
        model = Iscrizione3
        exclude = ('created', 'creator', )
        widgets = {
        'email': forms.TextInput(attrs={'class':'form-control', 'required':'', 'placeholder': 'Email'}),
        'allegato': AjaxClearableFileInput,
        }

template:

<form id="login-nav" class="" role="form" method="post" enctype="multipart/form-data" action="{% url 'mao' %}">{% csrf_token %}

  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    {{ form }}
  </div>
  <div class="form-group">
   <input type="submit" class="btn btn-success btn-block" value="ISCRIVITI GRATIS" />
 </div>
</form>

<script>
    $(function() {
        AjaxUploadWidget.autoDiscover();
    });
</script>


  <script type="text/javascript">
$( document ).on('submit', '#login-nav', function(event) { // catch the form's submit event
          event.preventDefault();
          $.ajax({ // create an AJAX call...
              data: $(this).serialize(), // get the form data
              type: $(this).attr('method'), // GET or POST
              enctype: "multipart/form-data",
              url: $(this).attr('action'), // the file to call
              success: function(response) { // on success..
                $("#topo")
            .fadeOut('slow')
            .load( "{% url 'mao' %}" ,function () {
              $(this).fadeIn('slow')
            })

              }
          });
          return false;
        });
</script>

settings:

import dj_database_url
from common import *
from aws import *

INSTALLED_APPS += (
    'storages',
)

DEBUG = TEMPLATE_DEBUG = True

ALLOWED_HOSTS = ['*']



#Configure static content to be served form S3 
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
STATICFILES_STORAGE = DEFAULT_FILE_STORAGE
STATIC_URL = '//s3-eu-west-1.amazonaws.com/%s/' % AWS_STORAGE_BUCKET_NAME
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

AWS_QUERYSTRING_AUTH = False

The problem is in the widget with s3. They talk about it here: https://github.com/zmathew/django-ajax-upload-widget/issues/7

Thanks for your help. i really need this and i was so close to a good solution.

https://github.com/zmathew/django-ajax-upload-widget

here's the question: i have a normal Createview submitted via .ajax with an email and a filefield. I tried using django-ajax-upload-widget to manage image/file upload and it works perfect locally. When i use it on prod with Amazon i can see that it uploads the file on his own folder in S3 ( /ajax_uploads) but when i submit it doesn't save the model. I thought it was caused by the extended filename of s3 (signature.. expires..) but it's not that.

model:

class Iscrizione3(models.Model):

    email = models.EmailField(max_length=70, unique= True)
    created = models.DateTimeField(auto_now_add=True)
    allegato = models.FileField(upload_to=".")
    creator = models.ForeignKey(User)


    def __unicode__(self):
        return u"%s" % (self.email)

view:

class provaajax(CreateView):
    model = Iscrizione3
    form_class = CreaIscrizioneForm3
    template_name = "landing/pezzoform.html"

    def form_valid(self, form):
        """
        If the request is ajax, save the form and return a json response.
        Otherwise return super as expected.
        """
        if self.request.is_ajax():
            self.object = form.save(commit=False)
            self.object.creator = self.request.user
            self.object.save()
            return HttpResponse(json.dumps("success"),
                mimetype="application/json")
        return super(provaajax, self).form_valid(form)

    def get_success_url(self):
        return reverse2("landing7")

form:

from apps.ajax_upload.widgets import AjaxClearableFileInput

class CreaIscrizioneForm3(forms.ModelForm):
    class Meta:
        model = Iscrizione3
        exclude = ('created', 'creator', )
        widgets = {
        'email': forms.TextInput(attrs={'class':'form-control', 'required':'', 'placeholder': 'Email'}),
        'allegato': AjaxClearableFileInput,
        }

template:

<form id="login-nav" class="" role="form" method="post" enctype="multipart/form-data" action="{% url 'mao' %}">{% csrf_token %}

  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    {{ form }}
  </div>
  <div class="form-group">
   <input type="submit" class="btn btn-success btn-block" value="ISCRIVITI GRATIS" />
 </div>
</form>

<script>
    $(function() {
        AjaxUploadWidget.autoDiscover();
    });
</script>


  <script type="text/javascript">
$( document ).on('submit', '#login-nav', function(event) { // catch the form's submit event
          event.preventDefault();
          $.ajax({ // create an AJAX call...
              data: $(this).serialize(), // get the form data
              type: $(this).attr('method'), // GET or POST
              enctype: "multipart/form-data",
              url: $(this).attr('action'), // the file to call
              success: function(response) { // on success..
                $("#topo")
            .fadeOut('slow')
            .load( "{% url 'mao' %}" ,function () {
              $(this).fadeIn('slow')
            })

              }
          });
          return false;
        });
</script>

settings:

import dj_database_url
from common import *
from aws import *

INSTALLED_APPS += (
    'storages',
)

DEBUG = TEMPLATE_DEBUG = True

ALLOWED_HOSTS = ['*']



#Configure static content to be served form S3 
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
STATICFILES_STORAGE = DEFAULT_FILE_STORAGE
STATIC_URL = '//s3-eu-west-1.amazonaws.com/%s/' % AWS_STORAGE_BUCKET_NAME
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

AWS_QUERYSTRING_AUTH = False

The problem is in the widget with s3. They talk about it here: https://github.com/zmathew/django-ajax-upload-widget/issues/7

Thanks for your help. i really need this and i was so close to a good solution.

https://github.com/zmathew/django-ajax-upload-widget

Source