title: Django Rest Framework - how to combine my two serializers?
body: <p>I have two models one of which contains text and the other an image and are connected via a ForeignKey. The problem revolves around the <code>pictures</code> attribute in my <code>FortuneSerializer</code>. In order to <code>create</code> I have to uncomment one and comment out another. And, in order to display the results correctly I have to do the same (uncomment/comment out). I can successfully use the modified <code>create</code> method in the <code>FortuneSerializer</code> but displaying the <code>pictures</code> results is a problem. </p>
  
  <p>When I use the <code>PictureSerializer</code> inside of the <code>FortuneSerializer</code> results are displayed correctly like so:</p>
  
  <pre><code>    {
          "id": 16,
          "content": "win the lottery",
          "pictures": [
              {
                  "id": 2,
                  "image": "/media/2016/03/09/mypicture.png"
              }
          ]
      },
  </code></pre>
  
  <p>but while they display properly I can't use the <code>create</code> to capture the picture. Because of this I comment out <code>PictureSerializer</code> in the <code>FortuneSerializer</code> and uncomment <code>serializer.ImageField()</code> which will successfully create a Fortune instance and capture the picture, but the results don't display the picture url like so:</p>
  
  <pre><code>    {
          "id": 16,
          "content": "win the lottery",
          "pictures": null
      },
  </code></pre>
  
  <p>Serializers:</p>
  
  <pre><code>class PictureSerializer(serializers.ModelSerializer):
  
      class Meta:
          model = Picture
          fields = ('id', 'image')
  
  class FortuneSerializer(serializers.ModelSerializer):
  
      # If uncommented, will display picture url in results, but can't create
      pictures = PictureSerializer(many=True)
  
      # If uncommented, will create Fortune with attached Picture,
      # but will display `null` in results
      pictures = serializers.ImageField(max_length=None, allow_empty_file=False)
  
      class Meta:
          model = Fortune
          fields = ('id', 'content', 'pictures')
  
      def create(self, validated_data):
          pictures = validated_data.pop('pictures')
          fortune = Fortune.objects.create(user=self.context['request'].user, **validated_data)
          if pictures:
              p=Picture(fortune=fortune)
              p.image.save(str(pictures), pictures)
          return fortune
  </code></pre>
  
  <p>Models:</p>
  
  <pre><code>class Fortune(models.Model):
      user = models.ForeignKey(User, related_name='fortunes')
      content = models.CharField(max_length=50)
  
  class Picture(models.Model):
      fortune = models.ForeignKey(Fortune, related_name='pictures')
      image = models.ImageField(upload_to='%Y/%m/%d')
  </code></pre>
  
  <p>Views:</p>
  
  <pre><code>class FortuneList(generics.ListCreateAPIView):
      queryset = Fortune.objects.all()
      serializer_class = FortuneSerializer
  
  def list(self, request, user_id):
      queryset = Fortune.objects.filter(user__id=user_id)
      serializer = FortuneSerializer(queryset, many=True)
      return Response(serializer.data)
  </code></pre>
  
  <p>Any solutions?</p>
  
  <p><strong>==== UPDATE 1 =====</strong></p>
  
  <p>I updated the <code>FortuneSerializer</code> and <code>PictureSerializer</code> as <strong>@YPCrumble</strong> suggested:</p>
  
  <pre><code>class FortuneSerializer(serializers.ModelSerializer):
  
      class Meta:
          model = Fortune
          fields = ('id', 'content', 'pictures')
  
      def create(self, validated_data):
          pictures = validated_data.pop('pictures')
          fortune = Fortune.objects.create(user=self.context['request'].user, **validated_data)
  
          if pictures:            
              [Picture(fortune=fortune, image=picture) for picture in pictures]
  
          return fortune
  
  class PictureSerializer(serializers.ModelSerializer):
  
      class Meta:
          list_serializer_class = FortuneSerializer
  </code></pre>
  
  <p>I can create a new <code>fortune</code> using the DRF default HTML post form. The form contains a text input for the title and a multiple select menu to select existing picture files (created using the previous serializers, which has a multi file select input). I can select single or multiple files and create the <code>fortune</code> with no problems and the picture files now associated with the new <code>fortune</code> will be listed. However, I'd like to POST new images with <code>fortune</code>. There is no file input in the form for me to select new pictures to upload. Any pointers? </p>