Databases
StackOverflow2013
Postsdbo
POAngularJS Uploading An Image With ng-upload
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS Uploading An Image With ng-upload
    primarykey
    data
    text
    <p>I am trying to upload a file in AngularJS using ng-upload but I am running into issues. My html looks like this:</p> <pre><code>&lt;div class="create-article" ng-controller="PostCreateCtrl"&gt; &lt;form ng-upload method="post" enctype="multipart/form-data" action="/write" &gt; &lt;fieldset&gt; &lt;label&gt;Category&lt;/label&gt; &lt;select name="category_id" class=""&gt; &lt;option value="0"&gt;Select A Category&lt;/option&gt; &lt;?php foreach($categories as $category): ?&gt; &lt;option value="&lt;?= $category -&gt; category_id; ?&gt;"&gt;&lt;?= $category -&gt; category_name; ?&gt;&lt;/option&gt; &lt;?php endforeach; ?&gt; &lt;/select&gt; &lt;label&gt;Title&lt;/label&gt; &lt;input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="&lt;?= $post -&gt; post_title; ?&gt;" /&gt; &lt;label&gt;Attach Image&lt;/label&gt; &lt;input type="file" name="post_image" /&gt; &lt;a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" &gt;Crop Image&lt;/a&gt; &lt;label&gt;Body&lt;/label&gt; &lt;div id="container"&gt; &lt;textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."&gt;&lt;?= $post -&gt; post_content; ?&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div style='clear:both;'&gt;&lt;/div&gt; &lt;label&gt;Preview&lt;/label&gt; &lt;div id='textarea-preview'&gt;&lt;/div&gt; &lt;/fieldset&gt; &lt;div class="span7" style="margin: 0;"&gt; &lt;input type="submit" class="btn btn-success" value="Create Post" /&gt; &lt;input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>And my js controller looks like this:</p> <pre><code>ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel', function($scope, PostModel) { $scope.uploadPostImage = function(contents, completed) { console.log(completed); alert(contents); } }]); </code></pre> <p>The problem I am facing is when the crop image is hit and it executes uploadPostImage, it uploads the entire form. Not desired behavior but I can make it work. The big problem is in the js the function uploadPostImage 'contents' parameters is always undefined, even when the 'completed' parameter comes back as true.</p> <p>The goal is to only upload an image for cropping. What am I doing wrong in this process?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDevin Dixon
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAngularJS Uploading An Image With ng-upload
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAngularJS Uploading An Image With ng-upload
      1. USmarjori
      1. VTFavorite
    3. VO
      singulars
      1. POAngularJS Uploading An Image With ng-upload
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload