Storing image with Angular

1,967 views
Skip to first unread message

Ted

unread,
Dec 8, 2009, 10:21:27 AM12/8/09
to Angular
Hi

I love the simplicity of angular; I am currently trying to design a
car maintenance website using angular. And for the website, I would
like to be able to store images for each car and display them when I
am browsing each car. I figured I might be able to achieve this by
storing the link to the image (which is stored somewhere else) in
angular database. I am wondering if there is a more elegant way of
storing images with angular. Thanks in advance :)

Misko Hevery

unread,
Dec 8, 2009, 11:43:30 AM12/8/09
to ang...@googlegroups.com
Hi Ted,

Welcome to <angular/>, we are glad that you like the simplicity, that is exactly what we are aiming for. We would love to help you design your website, so please send us any questions you may have. We can also help you with the best way to design the entities for storing your data. If you can describe what you have in mind better we could give you suggestions to get you started.

As for as file attachments here is a good place to get started: http://docs.getangular.com/File_Upload_Widget#image=f581994635bad44e3d1259dee063cc2a

As you can see we support file attachments.

Here is what I would like to suggest.

Create two pages: CarView.html and CarEdit.html In the CarEdit.html place the upload widget and input fields for the editing. In the CarView.html place the read only view of the pages. Than give everyone read permission and give yourself write permissions in the backend.

Let us know what else we may help you with, and also we would love to see your website as you are building it.

-- Misko


--

You received this message because you are subscribed to the Google Groups "Angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.



ndimopoulos

unread,
Dec 8, 2009, 12:21:11 PM12/8/09
to Angular
To add to Misko's reply:

Once you have created your library you can create your database. When
you choose the database you want to edit, add +r to anonymous access.
This will allow everyone to read data from your site and they will do
so by visiting the CarView.html (or whatever you wish to use). Since
you are already an admin of the databases, you will need to secure the
CarEdit.html page. You can do that by using the ng-auth directive. In
your <body> you can use:

<body ng-auth="eager">

and that will pop up a log in window so that you can log into your
account using <angular/>

You can also have a look at my blog post for some hints and tips,
although I did not cover file uploads.

http://www.niden.net/2009/12/the-world-with-angular-part-1/

I hope the above helps.

Nikos

On Dec 8, 11:43 am, Misko Hevery <misko.hev...@gmail.com> wrote:
> Hi Ted,
>
> Welcome to <angular/>, we are glad that you like the simplicity, that is
> exactly what we are aiming for. We would love to help you design your
> website, so please send us any questions you may have. We can also help you
> with the best way to design the entities for storing your data. If you can
> describe what you have in mind better we could give you suggestions to get
> you started.
>
> As for as file attachments here is a good place to get started:http://docs.getangular.com/File_Upload_Widget#image=f581994635bad44e3...
>
> As you can see we support file attachments.
>
> Here is what I would like to suggest.
>
> Create two pages: CarView.html and CarEdit.html In the CarEdit.html place
> the upload widget and input fields for the editing. In the CarView.html
> place the read only view of the pages. Than give everyone read permission
> and give yourself write permissions in the backend.
>
> Let us know what else we may help you with, and also we would love to see
> your website as you are building it.
>
> -- Misko
>
> On Tue, Dec 8, 2009 at 7:21 AM, Ted <ite...@gmail.com> wrote:
> > Hi
>
> > I love the simplicity of angular; I am currently trying to design a
> > car maintenance website using angular. And for the website, I would
> > like to be able to store images for each car and display them when I
> > am browsing each car. I figured I might be able to achieve this by
> > storing the link to the image (which is stored somewhere else) in
> > angular database. I am wondering if there is a more elegant way of
> > storing images with angular. Thanks in advance :)
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "Angular" group.
> > To post to this group, send email to ang...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > angular+u...@googlegroups.com<angular%2Bunsu...@googlegroups.com>
> > .

Ted

unread,
Dec 8, 2009, 10:40:52 PM12/8/09
to Angular
Hi Nikos and Misko, thank both of you for your immediate replies :).
Yes, I think got the answer I was looking for. Now, I will get started
with my website, and will let you know once I have got my website
running :), thanks

Ted

Misko Hevery

unread,
Dec 8, 2009, 11:16:02 PM12/8/09
to ang...@googlegroups.com
Any question, please don't hesitate to ask, we are here to help.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Ted Kuo

unread,
Dec 9, 2009, 9:21:26 AM12/9/09
to Angular
Hi Misko

I just tried to build a basic page that allows for file upload in my
blog:

http://motorbasesupport.blogspot.com.

However, I couldn't get it to work. I have coded in the same way as
given in your previous example, except I connected it to my own
angular database. Its returning me an error: "httpStatus:
image.attachment status:406".

Reading from the http status code, it seems like its complaining my
page cannot accept the return value of the "file upload" widget. Is
this because the angular widget cannot be run on blogger? I am not
sure, it would be great if you give me a hand here, thanks in
advance :).

- Ted
> > <angular%2Bunsu...@googlegroups.com<angular%252Bunsubscribe@googlegroup s.com>>

Ted Kuo

unread,
Dec 9, 2009, 9:14:35 AM12/9/09
to Angular
Hi Misko

I just tried to build a basic page that allows for file upload in my
<a href="http://motorbasesupport.blogspot.com/">blog</a>, however, I
couldn't get it to work. I have coded in the same way as given in
<a href="http://docs.getangular.com/
File_Upload_Widget#image=f581994635bad44e3d1259dee063cc2a">your
example</a>, except I connected it to my own angular database.
However, its returning me an error: "httpStatus: image.attachment
status:406". Reading from the http status code, it seems like its
complaining my page cannot accept the return value of the "file
upload" widget. Is this because the angular widget cannot be run on
blogger? I am not sure, it would be great if you give me a hand here,
thanks in advance :).

- Ted


On 12月9日, 下午12時16分, Misko Hevery <misko.hev...@gmail.com> wrote:
> > <angular%2Bunsu...@googlegroups.com<angular%252Bunsubscribe@googlegroup s.com>>

Misko Hevery

unread,
Dec 9, 2009, 10:03:06 AM12/9/09
to ang...@googlegroups.com, Adam Abrons
Hi Ted,

Could you describe in more detail what you have done that it did not work for you? I have just tried it and it worked for me. See the uploaded file here: http://motorbasesupport.blogspot.com/#image=5e9f31ede9e784c401b1a8436b6139b0

Here are some troubleshooting steps: 

BTW, how did you get the script tag into the blogger? did you just embed it in the post?

-- Misko

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Ted Kuo

unread,
Dec 9, 2009, 10:38:40 PM12/9/09
to Angular
Hi Misko

Thanks for the reply, What I have done is:

1. I put the javascript snippet (that connects to my angular database)
in the <head> tag in html of my blogger's layout template such that
all posts have access to my angular database.
2. Then I put the following snippet in my first post:

<div ng-entity="image=Image">
<input type="file" name="image.attachment"> <br>
<input type="submit" value="Save"> <br>
{{image.attachment}}<br>
<img src="{{image.attachment.url}}"/>
<pre>attachment = {{image.attachment}}</pre>
</div>

3. I am using google chrome version: 3.0.195.33

Following your instructions, I have tried following approaches, but
the problem still persists:
1. logging into my angular account and then go to my blogger page and
try upload a random photo file. (I noticed that even the file upload
has failed, an entry is still being created in my angular database
when I press the submit (save) button )
2. given anonymous users both rw permissions and then try uploading a
random photo file without logging in.

thanks
Ted

On 12月9日, 下午11時03分, Misko Hevery <misko.hev...@gmail.com> wrote:
> Hi Ted,
>
> Could you describe in more detail what you have done that it did not work
> for you? I have just tried it and it worked for me. See the uploaded file
> here:http://motorbasesupport.blogspot.com/#image=5e9f31ede9e784c401b1a8436...
>
> Here are some troubleshooting steps:
>
>    - I noticed that you have to be logged in to write to your database. Did
>    you log in?http://www.getangular.com/user_session/new
>    - What browser and version are you using?
> > > > <angular%2Bunsu...@googlegroups.com<angular%252Bunsubscribe@googlegroup s.com>

Misko Hevery

unread,
Dec 9, 2009, 11:28:46 PM12/9/09
to ang...@googlegroups.com
I found and corrected few things
  1. It is miss documented, but the anonymous settings are RW not +RW, I think + may confuse the system. I have fixed it. We are in the process of redoing the UI to make it more clear.
  2. You have enabled Site Permissions but you did not add your blog to it. I corrected it as well
I have tried another upload with Chrome and it worked for me: http://motorbasesupport.blogspot.com/#image=a7f749998bd6d45776bec4832fc52d18

Can you try again on your side?

-- misko

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Ted

unread,
Dec 10, 2009, 12:34:38 AM12/10/09
to Angular
Hi Misko

I have tried again on my side, but it still not working.. it still
reports the same error... Regarding the error, I think I should be
more specific. As soon as I selected a file to upload, two dialog
boxes pops up one after another:

The first one says: httpstatus: image.attachment status: 406

The second one says: ioError:image.attachment

Depending on the size of the attachment, the larger the file the
longer it takes to pop-up and vice-versa, so something must have gone
wrong at the end of the file transfer. I am not sure if this
information helps..

And yes thanks, I just realised I accidentally turned on "site
permission", thanks for fixing that error for me :)..

Ted

On 12月10日, 下午12時28分, Misko Hevery <mi...@getangular.com> wrote:
> I found and corrected few things
>
>    1. It is miss documented, but the anonymous settings are RW not +RW, I
>    think + may confuse the system. I have fixed it. We are in the process of
>    redoing the UI to make it more clear.
>    2. You have enabled Site Permissions but you did not add your blog to it.
>    I corrected it as well
>
> I have tried another upload with Chrome and it worked for me:http://motorbasesupport.blogspot.com/#image=a7f749998bd6d45776bec4832...
>
> Can you try again on your side?
>
> -- misko
>
> > <angular%2Bunsu...@googlegroups.com<angular%252Buns...@googlegroups.com>>
> > > > <angular%2Bunsu...@googlegroups.com<angular%252Buns...@googlegroups.com>
> > <angular%252Bunsubscribe@googlegroup s.com>>
> > > > > > <angular%2Bunsu...@googlegroups.com<angular%252Buns...@googlegroups.com>
> > <angular%252Bunsubscribe@googlegroup s.com>
> > > > <angular%252Bunsubscribe@googlegroup s.com>>
> > > > > > > > > .
> > > > > > > > > For more options, visit this group at
> > > > > > > > >http://groups.google.com/group/angular?hl=en.
>
> > > > > > --
>
> > > > > > You received this message because you are subscribed to the Google
> > > > Groups
> > > > > > "Angular" group.
> > > > > > To post to this group, send email to ang...@googlegroups.com.
> > > > > > To unsubscribe from this group, send email to
> > > > > > angular+u...@googlegroups.com<angular%2Bunsu...@googlegroups.com>
> > <angular%2Bunsu...@googlegroups.com<angular%252Buns...@googlegroups.com>>
> > > > <angular%2Bunsu...@googlegroups.com<angular%252Buns...@googlegroups.com>
> > <angular%252Bunsubscribe@googlegroup s.com>>
> > > > > > .
> > > > > > For more options, visit this group at
> > > > > >http://groups.google.com/group/angular?hl=en.
>
> > > > --
>
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "Angular" group.
> > > > To post to this group, send email to ang...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > angular+u...@googlegroups.com<angular%2Bunsu...@googlegroups.com>
> > <angular%2Bunsu...@googlegroups.com<angular%252Buns...@googlegroups.com>>

Ted

unread,
Dec 10, 2009, 12:49:34 AM12/10/09
to Angular
Just adding to my previous reply:

I also see the same error when I am trying to use the image upload
feature in the angular sample site:

http://poll.casualapp.com/index.html

Regards
- Ted
> ...
>
> 閱讀更多 »

Misko Hevery

unread,
Dec 10, 2009, 1:05:44 AM12/10/09
to ang...@googlegroups.com, Adam Abrons
I love bugs which I can not reproduce. :-)

I did some digging around and:
  • I see no server level logs
  • The error messages come from flash uploader we use. (We have to use flash to support cross site upload)
Here are some questions which will help us debug it
  • What is the file you are trying to upload? Image? Zip? etc, can you email it to me?
  • What is the size of the file. Can you find a small one which is doing it?
  • Where are you located physically?
  • Are there any firewalls/proxies between you and getangular.com
  • What version of flash do you have installed?
  • Do you have access to different browser/computer? can you try it there?
Here is some research I have done:
Lets see if we can get to the bottom of this!

-- Misko

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Ted

unread,
Dec 10, 2009, 3:48:07 AM12/10/09
to Angular
thanks again for your quick support , I admire your attitude toward
bugs :-P

To answer your question:

I am currently located In Taiwan (not within China) physically,
My flash player version is: WIN 10,0,32,18
I have tried many different types of files, but mainly jpg image files
within size of 500kb. I also have tried downloading the image you
uploaded to:

http://docs.getangular.com/File_Upload_Widget#image=f581994635bad44e3d1259dee063cc2a

However, none of them works. For testing purpose, I have uploaded one
image on my blog which I have tested and definitely cannot upload:

http://motorbasesupport.blogspot.com

I have tried uploading the file again with my MCaffee siteAdvisor,
internet protection setting and windows firewall all turned off, its
still not working. Could it be my internet provider's firewall which
might have blocked the upload? I hope its not

thanks
Ted

On 12月10日, 下午2時05分, Misko Hevery <misko.hev...@gmail.com> wrote:
> I love bugs which I can not reproduce. :-)
>
> I did some digging around and:
>
>    - I see no server level logs
>    - The error messages come from flash uploader we use. (We have to use
>    flash to support cross site upload)
>
> Here are some questions which will help us debug it
>
>    - What is the file you are trying to upload? Image? Zip? etc, can you
>    email it to me?
>    - What is the size of the file. Can you find a small one which is doing
>    it?
>    - Where are you located physically?
>    - Are there any firewalls/proxies between you and getangular.com
>    - What version of flash do you have installed?
>       -http://kb2.adobe.com/cps/155/tn_15507.html
>    - Do you have access to different browser/computer? can you try it there?
>
> Here is some research I have done:
>
>    -http://bradleyboy.com/blog/archives/2006/12/flash_upload_ht.php(but we
> ...
>
> 閱讀更多 »

Ted

unread,
Dec 10, 2009, 6:36:57 AM12/10/09
to Angular
I did some research, and some digging around. It seems to be a OS/anti-
virus/firewall related issue. I had my friends (who are in New Zealand
physically) helping me to test the upload function in my blog

http://motorbasesupport.blogspot.com/

One of my friends who uses Linux successfully uploaded a .bashrc file
to my angular database, but my other friends who uses windows get the
same 406 error as me. Misko, may I know what OS do you use? However,
at this stage, I am only guessing.

- Ted

On 12月10日, 下午4時48分, Ted <ite...@gmail.com> wrote:
> thanks again for your quick support , I admire your attitude toward
> bugs :-P
>
> To answer your question:
>
> I am currently located In Taiwan (not within China) physically,
> My flash player version is: WIN 10,0,32,18
> I have tried many different types of files, but mainly jpg image files
> within size of 500kb. I also have tried downloading the image you
> uploaded to:
>
> http://docs.getangular.com/File_Upload_Widget#image=f581994635bad44e3...
> ...
>
> 閱讀更多 »

Ted

unread,
Dec 10, 2009, 1:45:47 AM12/10/09
to Angular
thanks again for your quick support , I admire your attitude toward
bugs :-P

To answer your question:

I am currently located In Taiwan (not within China) physically,
My flash player version is: WIN 10,0,32,18
I have tried many different types of files, but mainly jpg image files
within size of 500kb. I also have tried downloading the image you
uploaded to:

http://docs.getangular.com/File_Upload_Widget#image=f581994635bad44e3d1259dee063cc2a

However, none of them works. For testing purpose, I have uploaded one
image on my blog which I have tested and definitely cannot upload:

http://motorbasesupport.blogspot.com

I have tried uploading the file again with my MCaffee siteAdvisor,
internet protection setting and windows firewall all turned off, its
still not working. Could it be my internet provider's firewall which
might have blocked the upload? I hope its not

thanks
Ted

On 12月10日, 下午2時05分, Misko Hevery <misko.hev...@gmail.com> wrote:
> I love bugs which I can not reproduce. :-)
>
> I did some digging around and:
>
>    - I see no server level logs
>    - The error messages come from flash uploader we use. (We have to use
>    flash to support cross site upload)
>
> Here are some questions which will help us debug it
>
>    - What is the file you are trying to upload? Image? Zip? etc, can you
>    email it to me?
>    - What is the size of the file. Can you find a small one which is doing
>    it?
>    - Where are you located physically?
>    - Are there any firewalls/proxies between you and getangular.com
>    - What version of flash do you have installed?
>       -http://kb2.adobe.com/cps/155/tn_15507.html
>    - Do you have access to different browser/computer? can you try it there?
>
> Here is some research I have done:
>
>    -http://bradleyboy.com/blog/archives/2006/12/flash_upload_ht.php(but we
> ...
>
> 閱讀更多 »

Misko Hevery

unread,
Dec 10, 2009, 12:04:38 PM12/10/09
to ang...@googlegroups.com, Adam Abrons
So I made some progress, and I was able to reproduce this.

It only seems to happen on Windows and only with Chrome, Safari and FF on windows (Strangely IE works fine). All other browser/OSes seem to be OK. I can also reproduce this in our development environment, which means it is not our NGINX set up.

Can you try it on your computer with IE browsers?

We will investigate this further and let you know when we have a fix for you. In the meantime, you should be able to continue with your site design, and building up the pages.

-- Misko

PS: I use Mac with Chrome and it is ok.

2009/12/9 Ted <motorbas...@gmail.com>

--

Ted

unread,
Dec 10, 2009, 7:24:00 PM12/10/09
to Angular
Hi Misko

I tried IE on my computer, IE doesn't work for me either. When I
selected a file and saved it, it didn't do anything. A progress bar
did appear as soon as I selected a file, but it got stuck and never
finished (i waited for about 5 minutes, I thought it was taking its
time to upload, the file was 2.9kb). However, I guess the good news is
it didn't return the 406 error I see in chrome & firefox. I am using
IE7, I will download IE8 and give it a try again.

Also, I am not sure if they are all related but I noticed that the
flash file upload widget doesn't even get displayed correctly in all
browsers if I load the widget locally in a html file.
What i did was:

1. Create a html file with the following texts:
<html>
<head>
<script type="text/javascript" src="http://VMS.getangular.com/
angular-1.0a.js#database=VMS"></script>
</head>
<body>
<div ng-entity="image=Image">
<input type="file" name="image.attachment"> <br>
<input type="submit" value="Save"> <br>
{{image.attachment}}<br>
<img src="{{image.attachment.url}}"/>
<pre>attachment = {{image.attachment}}</pre>
</div>
</body>
</html>

2. Load it in browsers, I noticed the "Attach a file" link
disappeared. I can only see the "tickbox" and the save button.

Hope these information are helpful to your investigation.
Ted

On 12月11日, 上午1時04分, Misko Hevery <misko.hev...@gmail.com> wrote:
> So I made some progress, and I was able to reproduce this.
>
> It only seems to happen on Windows and only with Chrome, Safari and FF on
> windows (Strangely IE works fine). All other browser/OSes seem to be OK. I
> can also reproduce this in our development environment, which means it is
> not our NGINX set up.
>
> Can you try it on your computer with IE browsers?
>
> We will investigate this further and let you know when we have a fix for
> you. In the meantime, you should be able to continue with your site design,
> and building up the pages.
>
> -- Misko
>
> PS: I use Mac with Chrome and it is ok.
>
> 2009/12/9 Ted <motorbasesupp...@gmail.com>
>
>
>
> > thanks again for your quick support , I admire your attitude toward
> > bugs :-P
>
> > To answer your question:
>
> > I am currently located In Taiwan (not within China) physically,
> > My flash player version is: WIN 10,0,32,18
> > I have tried many different types of files, but mainly jpg image files
> > within size of 500kb. I also have tried downloading the image you
> > uploaded to:
>
> >http://docs.getangular.com/File_Upload_Widget#image=f581994635bad44e3...
> ...
>
> 閱讀更多 »

Adam Abrons

unread,
Dec 11, 2009, 4:11:47 AM12/11/09
to ang...@googlegroups.com
Hi Ted, this is Adam from angular. 

I think I tracked down your problem - flash on Windows sends different headers and our server was interpreting the mime type differently.

I was able to successfully upload attachments in IE7, Safari 4, and Firefox 3.5 on Windows XP.

Please let us know if it's working for you now, or if you have any other problems.

cheers,
Adam


2009/12/10 Ted <ite...@gmail.com>
> ...
>
> 閱讀更多 >>

Ted

unread,
Dec 11, 2009, 4:56:40 AM12/11/09
to Angular
Hi Adam

Yes! thanks, it makes sense and its working now! I successfully
uploaded a selected file to angular database, thanks for the quick
support.

By the way, regarding my other question in my previous post. How come
the "flash upload" component does not get displayed correctly if I
load the html locally?


Regards
Ted
> ...
>
> 閱讀更多 >>

Misko Hevery

unread,
Dec 11, 2009, 7:25:21 PM12/11/09
to ang...@googlegroups.com
Hey Ted,

you are right, all browsers on Windows do not work on the file:// mode. You are great at finding these bugs.

I am going to have to think about this some more as to why it is not working, and works fine on mac in file:// mode. Should have an answer to you this weekend.

-- Misko

2009/12/11 Ted <ite...@gmail.com>
> ...
>
> 閱讀更多 >>

Misko Hevery

unread,
Dec 12, 2009, 12:34:16 PM12/12/09
to ang...@googlegroups.com
just to give you an update. For development we have installed a debug version of flash on our computers and the security settings are more lax on the development version, for this reason we have never noticed it. I am going to rewrite it without using flash. Hopefully, I should have a fix for you soon.

-- Misko

twool...@gmail.com

unread,
Jul 10, 2012, 12:42:21 AM7/10/12
to ang...@googlegroups.com
It looks like the link you have for the File Upload Widget doesn't exist anymore, I'm going to assume this is because of newer versions of Angular now. Is there a replacement alternative for handling File Uploads with AngularJS?
-- Misko

-- Misko

2009/12/11 Ted <ite...@gmail.com>

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages