Προς το περιεχόμενο

Η angular δε βρισκει εικονα που μολις εγινε upload


slevinkelevra

Προτεινόμενες αναρτήσεις

Καλησπερα.

Το σεναριο ειναι απλο. Χρηση φορμας για ανεβασμα μιας εικονας με το ονομα της. Αν ανεβει επιτυχως, τοτε ανανεωσε ενα photogallery. Χρισημοποιω  angular6 και το ng-carousel . Προς το παρων ειναι ολα τοπικα σε windows 10 laptop.

Η φορμα γινετε κανονικα upload, το κειμενο αποθηκευεται στη βαση κανονικα και η εικονα σωζεται σε φακελο στον Node.js. Βλεπω τις αλλαγες κανονικα και δεν υπαρχει κανενα λαθος στο κομματι της αποθηκευσης εικονας/κειμενου.

Ομως μετα την αποθηκευση προσπαθω να χρησιμοποιησω τη νεα εικονα με το URL της για να ανανεωσω το carousel, να την προσθεσω εκει ως τελευταια εικονα και το URL δινει error 404. Ομως ειναι το σωστο URL, η εικονα εχει αποθηκευτει και ολες οι υπολοιπες εικονες που ηδη υπαρχουν στο carousel χρησιμοποιουν παρομοιο URL και εμφανιζονται. Αλλα το URL της καινουριας δινει 404. Πρεπει να κανω recompile τo angular app για εμφανιστει. Δεν αρκει ενα F5 στον browser, χρειαζεται recompile. 

Δεν εχω ιδεα πως να το φτιαξω αυτο. Δοκιμασα να χρησιμοποιησω το File object  η το HTML5 FileReader API για να βασιστω καθαρα σε οτι εχω στο front-end και οχι να φτιαχνω URL με την αποθηκευμενη εικονα. Αλλα αυτα δεν εχουν URL και το carousel για να δουλεψει θελει URL της μοφης /assets/images/img.jpg . Για να χρησιμοποιησω καποιου ειδους URL πηρα το προσωρινο URL της εικονας που βλεπει ο node πριν αποθηκευσει την εικονα, αλλα ειναι URL σε temp folder και ο browser δε με αφηνει να το χρησιμοποιησω για λογους ασφαλειας. Δοκιμασα να φτιαξω καποιο URL με το createObjectURL αλλα δεν υποστηριζεται σε ολους τους browsers. Δοκιμασα το κλασικο, μετα απο επιτυχη αποθηκευση να κανω GET στον σερβερ να φερω την ανανεωμενη λιστα με τα ονοματα εικονων και να φτιαξω τα URL απο την αρχη για να τα δωσω στο carousel, οχι, παλι το τελευταιο URL το καινουριο δινει 404 error. Πρεπει να κανω recompile την app για να φτιαξει. 

Παιζει κατι, καποια ρυθμιση, καποιο θεμα ασφαλειας και ενω υπαρχει η εικονα, το URL της ειναι με το ζορι 404 ? Η ειμαι ηλιθιος και δε βλεπω κατι πολυ απλο η θα τους πω την αποψη μου πολυ περιγραφικα εκει στην angular. *αρχιζει και βαραει μπουνιες στο γραφειο και στριγγλιζει "αφου βλεπω την εικονα μπροστα μου" * . Αν ειναι κατι πολυ απλο που αποδυκνυει οτι ειμαι διαστημοβλακας, να μου το φερεται με το μαλακο. Τα χω παιξει. Τα νευρα μου. Βοηθεια.

 

Αν μπερδευτηκατε και εχετε αποριες, ρωτηστε

Ευχαριστω

Αναλυτικα η λογικη του κωδικα σε stackblitz

Ο κωδικας περιληπτικα

>>>>>Φορμα

<form *ngIf="pointPartsActive" [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted($event.target)" >
  <input type="file"  (change)='imageChange($event)' #imageInput id="imageInput" name = 'imageInput'  accept=".png, .jpg, .jpeg, .gif" formControlName="imageInput" > 
  <input type="text" formControlName="imageName" name='imageName' placeholder="name" >
  <button type="submit" >Submit</button>  
</form>

>>>>HTML carousel template, με custom html για διαγραφη εικονας στο μελλον

<ngb-carousel #carousel *ngIf="images" (slide)="onSlide($event)"> 
  <ng-template ngbSlide *ngFor="let im of images; let i = index"  id="{{im.id}}">
    <img src='../assets/images/{{im.name}}' >
    <div class='carousel-img-details'>
        <button type="button" (click)='deletepic(im.photoId)'>delete</button>   
    </div>
  </ng-template>
</ngb-carousel>

>>>>>Χειρισμος submit φορμας

  imageUploadSubmitted(form){  
    let formData = new FormData(form);
    let eb =null;
    this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
      event=>{        
        if(event.type === HttpEventType.Response){     
          eb = event.body;              
          if(eb.success){                  
            this.imageUpload.reset();                                                 
            this.addpic(eb.data);            
          }
        }        
    }); 
  }

>>>>>Μετα απο επιτυχη αποθηκευση, ανανεωση array που τροφοδοτει το carousel. Ειναι ενα απλο array με json objects [{'id':1,'name':'James'},{'id':2,'name':'Nolan'}] και γεμιζει το carousel με ngFor.

  addpic(data){
    let slide = null;    
    this.images.push({
        'photoId':Number(data.id)
        'id': this.images.length,   
        'name': data.name    
    });     
     //get the id of the last slide and go there :          
     setTimeout(() => {
      slide = this.images[this.images.length-1].id;    
      this.carousel.select(slide); 
     });
     this.images = this.images.slice(); //try to "refresh" array itself
  }

 

*βαραει ξανα μπουνιες στο γραφειο*

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δεν ξέρω αν βρήκες ήδη άκρη, από το recompile και μετά δεν διάβασα γιατί σχεδόν σίγουρα, σώζεις την εικόνα στον dev folder και όχι στο dist / public, με το rebuild μεταφέρεται όλο το static content στο public. Θα πρέπει να ορίσεις ένα φάκελο προφανώς μετά το public / dist folder που δεν θα τον πειράζεις στο build process και εκεί θα μπει ότι κάνεις upload.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...