javascript - Uploading, saving, and displaying a user's chosen profile picture using the MEAN stack -

-

For a site coded in the MEAN stack, I want to allow users to upload an image And then the image is displayed on a user's profile page until it changes it. According to Project Lead, each user has to have a file (I'm assuming in a / user profile directory that is not yet ready). When a user uploads an image, it has to be uploaded in their file. In the html file for the profile page, the profile picture will be the location of the photo uploaded in the IMGRCR user's file.

I have seen similar answers as to how to upload and display an image, but I am not sufficiently efficient to use the MEAN heap, to understand exactly how the questions Manipulation of the methods so that it helps my project. I have an answer that indicates in the right direction how can I learn to accomplish this task, if possible, then I can learn how to use the MEAN stack in a better way.

In addition to this, many answers I have seen that have seen the state to use angular-file-upload , but again, I just have more or less copies / Want to learn more than the code paste of the other.

Here's what I am currently doing:

imageUpload.client.service.js:

'Strict Use'; ('User'). Service ('image upload', ['$ http', function ($ http) {this.uploadImageToUrl = function (image, upload url) {var fd = new form data (); fd.append (('image', image); Http.post (uploadUrl, fd, {transformreequest: angular.identity, header: {'content-type': undefined}}. Success (function () {console.log ("image uploaded");}). Error (function () {console.log ("upload failed")}})}}}]);

fileModel.client.directive.js:

imageUpload.client.controller.js 

  'strict use'; Controller ('imageUploadController', ['$ scope', 'imageUpload', function ($ radius, image upload) {$ scope.uploadImage = function () {var image = $ scope.profileImage; var uploadUrl = // image upload Path for upload.uploadImagetoUrl (image, upload url);};}]);

Finally, see the related code on the profile: 

  & lt; Div class = "col-md-2" data-ng-controller = "ImageUploadController" & gt; & Lt; Br> & Lt; Img src = // image alt = "profile picture" width = "220" style = "border: 3px solid black" height = "200" & gt; & Lt; Input type = "file" file-model = "myFile" /> & Lt; Button ng-click = "upload image ()" & gt; Change picture & lt; / Button & gt; & Lt; / Div & gt; In addition, when IMG is uploaded and called as SRC for an IMG, then I have to make a way for this as a way for me to visualize Is there a need to create, or do I use only the literal file path like module / user / user profile / profile image. JPEG? If later, I would have to know about how to ensure that the image file path is always true when I call it  & lt; I call img src = ? I would have to think that I need to change the name of the images to upload the standard like 'ProfilePPJPAG' or to assign the path of a standard variable and use it for  & lt; Img src = & gt; . However, I do not know how to know about either


Comments

Post a Comment

Popular posts from this blog

apache - 504 Gateway Time-out The server didn't respond in time. How to fix it? -

-
Using a form submission on an embedded iframe , the customer downloads a compressed log file Requested. The request was sent to the server, which is the compressed log files, perform some database operations and returns a compressed file. After just 2 minutes, 504 gateway time-out server did not respond timely message on browser net panel How to fix this error? The log files were taking a long time to compress, and timeout was set to 2min The error was fixed by extending the file file: # # timeout: The number of seconds before getting the time out. # # # Timeout 120 timeout 600
Read more

c# - .net WebSocket: CloseOutputAsync vs CloseAsync -

-
We have a working ASP.NET Web API REST service, which is one of the methods of our controller, HTTPTTEX. .) Socket handler code looks something like this ... Public async task socket handler (AspNetWebSocketContext context) {_webSocket = context.WebSocket; ... while (! Cts.IsCancellationRequested) {WebSocketReceiveResult Results = _webSocket.ReceiveAsync (Input Segment, cts.Token) .Result; WebSocketsStateCollusocketState = _webSocket.State; If (result.MessageType == WebSocketMessageType.Close || currentSocketState == WebSocketState.CloseReceived) {// What should I use. CloseAysnc () or. CloseOutputAsync ()? _webSocket.CloseOutputAsync (WebSocketCloseStatus.NormalClosure, "Client Requested", cts.Token). Wait (); } If (currentSocketState == WebSocketState.Open) {...}}} .What is the difference between .CooseAsync () and CloseOutputAysnc ()? I tried both of them and they both seemed to work fine but some difference should be the same they both describe very similar to...
Read more

c++ - How to properly scale qgroupbox title with stylesheet for high resolution display? -

-
I am trying to apply a stylesheet for QGroupBox (QT4.8), which works on the normal screen ( 96 dpi) high resolution screen (Yoga 2 Pro, 3200x1800, 275 dpi, windows 8.1). The following style looks good on the 275 dpi screen, but the top margins on a regular 96 dpi screen are far too big. QGroupBox {border: 1px solid red; Range radius: 7px; Margin-top: 12x; } QGroupBox :: Title {subcontrol-origin: margin; Subcontrol-position: left above; Padding-left: 10px; Padding-right: 10px; } Changing the top-margin has an effect, but I did not get a proper setting which works on both screens. If I shorten the value, the content of the group box overlaps with the title on 275 dpi screen. I was also playing with units "East", "PX", "MX", "PT". Reading the document I would have guessed, "2 X" was the correct solution, which should be scaled with different screen resolutions. Without the stylesheet, the groupbox works well on both screens. ...
Read more